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

修复详情页账号截图加载

Browse Source
This commit is contained in:
yml2213
2026-06-08 07:35:43 +08:00
parent 353f62edf0
commit c4420dc753
4 changed files with 121 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/listings/views/ListingDetailView.vue
+9 -2
View File
@@ -10,6 +10,7 @@ import {
type OrderAgreements,
} from '@/features/orders/api/orders'
import { useSessionStore } from '@/stores/session'
import AuthImage from '@/shared/components/business/AuthImage.vue'
import { roundMoney, formatMoney } from '@/shared/utils/money'
import {
assetRegions,
@@ -321,7 +322,13 @@ function listingPrice(item: Listing) {
<div v-if="listing" class="pc-detail-layout">
<section class="pc-detail-main">
<div class="detail-hero-card">
<img v-if="coverURL" :src="coverURL" :alt="getListingTitle(listing)" />
<AuthImage
v-if="coverURL"
:source="coverURL"
:alt="getListingTitle(listing)"
image-class="detail-hero-img"
loading="eager"
/>
<span v-else>HFB ACCOUNT</span>
<div class="detail-hero-overlay">
<div class="detail-tags">
@@ -417,7 +424,7 @@ function listingPrice(item: Listing) {
</div>
<div class="detail-screenshot-grid">
<figure v-for="shot in detailScreenshots" :key="shot.url" class="detail-screenshot">
<img :src="shot.url" :alt="shot.label" loading="lazy" decoding="async" />
<AuthImage :source="shot.url" :alt="shot.label" />
<figcaption>{{ shot.label }}</figcaption>
</figure>
</div>
frontend/src/features/listings/views/MobileListingDetailView.vue
+6 -5
View File
@@ -10,6 +10,7 @@ import {
type OrderAgreements,
} from '@/features/orders/api/orders'
import { useSessionStore } from '@/stores/session'
import AuthImage from '@/shared/components/business/AuthImage.vue'
import { formatMoney } from '@/shared/utils/money'
import {
assetRegions,
@@ -282,12 +283,12 @@ function readError(error: unknown, fallback: string) {
<!-- 封面图 -->
<div class="cover-area">
<img
<AuthImage
v-if="detailScreenshots[0]?.url"
:src="detailScreenshots[0].url"
:source="detailScreenshots[0].url"
:alt="getListingTitle(listing)"
class="cover-img"
decoding="async"
image-class="cover-img"
loading="eager"
/>
<div v-else class="cover-placeholder">
<van-icon name="photo-o" :size="40" color="#ccc" />
@@ -382,7 +383,7 @@ function readError(error: unknown, fallback: string) {
<h3 class="card-subtitle">账号截图</h3>
<div class="screenshot-grid">
<figure v-for="shot in detailScreenshots" :key="shot.url" class="screenshot-item">
<img :src="shot.url" class="screenshot-thumb" loading="lazy" decoding="async" />
<AuthImage :source="shot.url" :alt="shot.label" image-class="screenshot-thumb" />
<figcaption>{{ shot.label }}</figcaption>
</figure>
</div>
frontend/src/shared/components/business/AuthImage.vue
+106
View File
@@ -0,0 +1,106 @@
<script setup lang="ts">
import { computed, onBeforeUnmount, ref, watch } from 'vue'
import { fetchAdminFileBlob, fetchFileBlobByURL } from '@/shared/api/files'
const props = withDefaults(
defineProps<{
source: string
alt?: string
admin?: boolean
imageClass?: string
fallbackClass?: string
loading?: 'eager' | 'lazy'
decoding?: 'async' | 'sync' | 'auto'
}>(),
{
alt: '',
admin: false,
imageClass: '',
fallbackClass: '',
loading: 'lazy',
decoding: 'async',
}
)
const imageURL = ref('')
const failed = ref(false)
let createdObjectURL = ''
const fallbackText = computed(() => (failed.value ? '图片加载失败' : '图片加载中'))
function extractObjectKey(value: string) {
try {
const parsed = new URL(value, window.location.origin)
return parsed.searchParams.get('key') || ''
} catch {
return ''
}
}
function shouldFetchWithAuth(value: string) {
return value.includes('/api/files/object') || value.includes('/api/admin/files/object')
}
function revokeCurrentURL() {
if (!createdObjectURL) return
URL.revokeObjectURL(createdObjectURL)
createdObjectURL = ''
}
async function loadImage() {
revokeCurrentURL()
imageURL.value = ''
failed.value = false
if (!props.source) {
failed.value = true
return
}
if (!shouldFetchWithAuth(props.source)) {
imageURL.value = props.source
return
}
try {
const key = extractObjectKey(props.source)
const blob =
props.admin && key ? await fetchAdminFileBlob(key) : await fetchFileBlobByURL(props.source)
createdObjectURL = URL.createObjectURL(blob)
imageURL.value = createdObjectURL
} catch {
failed.value = true
}
}
watch(() => [props.source, props.admin] as const, loadImage, { immediate: true })
onBeforeUnmount(revokeCurrentURL)
</script>
<template>
<img
v-if="imageURL"
:class="imageClass"
:src="imageURL"
:alt="alt"
:loading="loading"
:decoding="decoding"
/>
<span v-else :class="['auth-image-fallback', fallbackClass]">{{ fallbackText }}</span>
</template>
<style scoped>
.auth-image-fallback {
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
border: 1px dashed #d8dee8;
border-radius: 12px;
background: #f8fafc;
color: #94a3b8;
font-size: 13px;
font-weight: 700;
}
</style>
test_payment_config.sh
-118
View File
@@ -1,118 +0,0 @@
#!/bin/bash
set -e
BASE_URL="http://127.0.0.1:8080/api"
echo "=== 支付配置功能测试 ==="
echo ""
# 1. 获取验证码
echo "1. 获取验证码..."
CAPTCHA_RESP=$(curl -s "${BASE_URL}/admin/auth/captcha")
CAPTCHA_ID=$(echo $CAPTCHA_RESP | jq -r '.data.captcha_id')
echo " 验证码 ID: $CAPTCHA_ID"
# 2. 登录（开发环境验证码可以使用任意值）
echo ""
echo "2. 管理员登录..."
LOGIN_RESP=$(curl -s "${BASE_URL}/admin/auth/login" \
-H "Content-Type: application/json" \
-d "{\"username\":\"admin\",\"password\":\"admin123456\",\"captcha_id\":\"${CAPTCHA_ID}\",\"captcha\":\"RAZK\"}")
TOKEN=$(echo $LOGIN_RESP | jq -r '.data.token')
if [ "$TOKEN" = "null" ] || [ -z "$TOKEN" ]; then
echo " ❌ 登录失败"
echo $LOGIN_RESP | jq .
exit 1
fi
echo " ✅ 登录成功"
echo " Token: ${TOKEN:0:50}..."
# 3. 查看支付配置列表
echo ""
echo "3. 查看支付配置列表..."
LIST_RESP=$(curl -s "${BASE_URL}/admin/payment-configs" \
-H "Authorization: Bearer ${TOKEN}")
echo $LIST_RESP | jq .
TOTAL=$(echo $LIST_RESP | jq -r '.data.total // 0')
echo " 当前配置数量: $TOTAL"
# 4. 创建测试支付配置
echo ""
echo "4. 创建测试支付配置..."
CREATE_RESP=$(curl -s "${BASE_URL}/admin/payment-configs" \
-H "Authorization: Bearer ${TOKEN}" \
-H "Content-Type: application/json" \
-d '{
"name": "测试乐刷商户",
"provider": "leshua",
"merchant_id": "TEST123456789",
"gateway_url": "https://t-paygate.lepass.cn/cgi-bin/lepos_pay_gateway.cgi",
"sign_key": "test-sign-key-secret",
"notify_key": "test-notify-key-secret",
"notify_url": "http://localhost:8080/api/payments/leshua/notify",
"jump_url": "http://localhost:5173/payment/result",
"pay_way": "ZFBZF",
"jspay_flag": "2",
"sign_type": "MD5",
"is_default": true,
"status": "active",
"environment": "sandbox"
}')
CONFIG_ID=$(echo $CREATE_RESP | jq -r '.data.id // empty')
if [ -z "$CONFIG_ID" ]; then
echo " ❌ 创建失败"
echo $CREATE_RESP | jq .
exit 1
fi
echo " ✅ 创建成功，配置 ID: $CONFIG_ID"
# 5. 查看单个配置（不包含密钥）
echo ""
echo "5. 查看配置详情（不包含密钥）..."
GET_RESP=$(curl -s "${BASE_URL}/admin/payment-configs/${CONFIG_ID}" \
-H "Authorization: Bearer ${TOKEN}")
echo $GET_RESP | jq .
SIGN_KEY=$(echo $GET_RESP | jq -r '.data.sign_key')
echo " 密钥是否加密: $([ \"$SIGN_KEY\" = \"******\" ] && echo '✅ 是' || echo '❌ 否')"
# 6. 查看配置（包含密钥明文）
echo ""
echo "6. 查看配置详情（包含密钥明文）..."
GET_SECRET_RESP=$(curl -s "${BASE_URL}/admin/payment-configs/${CONFIG_ID}?include_secret=true" \
-H "Authorization: Bearer ${TOKEN}")
SIGN_KEY_PLAIN=$(echo $GET_SECRET_RESP | jq -r '.data.sign_key')
echo " 解密后的 sign_key: $SIGN_KEY_PLAIN"
echo " 密钥是否正确: $([ \"$SIGN_KEY_PLAIN\" = \"test-sign-key-secret\" ] && echo '✅ 是' || echo '❌ 否')"
# 7. 更新配置
echo ""
echo "7. 更新配置..."
UPDATE_RESP=$(curl -s -X PUT "${BASE_URL}/admin/payment-configs/${CONFIG_ID}" \
-H "Authorization: Bearer ${TOKEN}" \
-H "Content-Type: application/json" \
-d '{
"name": "测试乐刷商户（已更新）",
"status": "testing"
}')
echo $UPDATE_RESP | jq .
NEW_NAME=$(echo $UPDATE_RESP | jq -r '.data.name')
echo " 更新后名称: $NEW_NAME"
# 8. 查看最终配置列表
echo ""
echo "8. 查看最终配置列表..."
FINAL_LIST=$(curl -s "${BASE_URL}/admin/payment-configs" \
-H "Authorization: Bearer ${TOKEN}")
echo $FINAL_LIST | jq .
# 9. 删除测试配置
echo ""
echo "9. 删除测试配置..."
DELETE_RESP=$(curl -s -X DELETE "${BASE_URL}/admin/payment-configs/${CONFIG_ID}" \
-H "Authorization: Bearer ${TOKEN}")
echo $DELETE_RESP | jq .
echo ""
echo "=== ✅ 测试完成 ==="