yml2213andClaude Opus 4.8
f336957391
- 解锁赛伊德：皮肤与交接分区新增是/否必选项，存入 asset_summary， 仅当号主选「是」时在买家端列表/详情展示「解锁赛伊德：是」 - 腾讯安全中心截图：新增可复用 GuideImage 组件（缩略图 + 点击全屏放大）， 在该截图槽位展示处罚截图教程图，仅提示用途、不占用上传数量 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
94 lines
1.7 KiB
Vue
94 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
src: string
|
|
label?: string
|
|
}>(),
|
|
{
|
|
label: '点击查看示例',
|
|
}
|
|
)
|
|
|
|
const open = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="guide-image">
|
|
<button type="button" class="guide-thumb" @click="open = true">
|
|
<img :src="src" alt="示例图" loading="lazy" decoding="async" />
|
|
<span class="guide-thumb-tip">{{ label }}</span>
|
|
</button>
|
|
|
|
<Teleport to="body">
|
|
<div v-if="open" class="guide-viewer" @click="open = false">
|
|
<button type="button" class="guide-viewer-close" @click="open = false">关闭</button>
|
|
<img class="guide-viewer-img" :src="src" alt="示例大图" @click.stop />
|
|
</div>
|
|
</Teleport>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.guide-image {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.guide-thumb {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 8px 4px 4px;
|
|
border: 1px dashed #c0c4cc;
|
|
border-radius: 8px;
|
|
background: #f7f9fc;
|
|
cursor: zoom-in;
|
|
}
|
|
|
|
.guide-thumb img {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 6px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.guide-thumb-tip {
|
|
color: #409eff;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.guide-viewer {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 3000;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 24px 12px;
|
|
overflow: auto;
|
|
background: rgba(0, 0, 0, 0.82);
|
|
}
|
|
|
|
.guide-viewer-img {
|
|
width: min(720px, 94vw);
|
|
height: fit-content;
|
|
border-radius: 8px;
|
|
cursor: default;
|
|
}
|
|
|
|
.guide-viewer-close {
|
|
position: fixed;
|
|
top: 16px;
|
|
right: 16px;
|
|
z-index: 3001;
|
|
padding: 6px 16px;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.92);
|
|
color: #1f2937;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|