发布流程增加解锁赛伊德与腾讯安全中心截图教程

- 解锁赛伊德：皮肤与交接分区新增是/否必选项，存入 asset_summary，
  仅当号主选「是」时在买家端列表/详情展示「解锁赛伊德：是」
- 腾讯安全中心截图：新增可复用 GuideImage 组件（缩略图 + 点击全屏放大），
  在该截图槽位展示处罚截图教程图，仅提示用途、不占用上传数量

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/components.d.ts

@@ -62,6 +62,7 @@ declare module 'vue' {
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    GuideImage: typeof import('./src/components/GuideImage.vue')['default']
     InAppBrowserPrompt: typeof import('./src/components/InAppBrowserPrompt.vue')['default']
     MobileBottomNav: typeof import('./src/components/MobileBottomNav.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

frontend/src/components/GuideImage.vue

@@ -0,0 +1,93 @@
+<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>

frontend/src/features/seller/composables/usePublishDraft.ts

@@ -17,6 +17,7 @@ export function defaultPublishForm(): PublishForm {
     login_method: '',
     online_start: '',
     online_end: '',
+    unlock_said: '',
     ban_record: '',
     common_regions: [],
     depositAmountYuan: '',

frontend/src/features/seller/composables/usePublishForm.ts

@@ -285,6 +285,7 @@ export function usePublishForm(options: UsePublishFormOptions) {
       login_method: listing.login_platform || '',
       online_start: stringValue(onlineTime.start),
       online_end: stringValue(onlineTime.end),
+      unlock_said: stringValue(summary.unlock_said),
       ban_record: stringValue(summary.ban_record),
       common_regions: stringArray(summary.common_regions),
       depositAmountYuan: listing.deposit_amount_cent > 0 ? listing.deposit_amount_cent / 100 : '',
@@ -730,6 +731,7 @@ export function usePublishForm(options: UsePublishFormOptions) {
       }
     }
     if (pricing.banRecordOptions.value.length && !form.ban_record) return '请选择封禁记录'
+    if (!form.unlock_said) return '请选择是否解锁赛伊德'
     if (form.depositAmountYuan === '' || Number(form.depositAmountYuan) < 0) return '请填写押金'
     if (!Number.isFinite(Number(form.depositAmountYuan))) return '押金格式不正确'
     if (
@@ -825,6 +827,7 @@ export function usePublishForm(options: UsePublishFormOptions) {
         start: form.online_start,
         end: form.online_end,
       },
+      unlock_said: form.unlock_said,
       ban_record: form.ban_record,
       common_regions: form.common_regions,
       remark: form.remark,

frontend/src/features/seller/views/MobileSellerListingCreateView.vue

@@ -6,6 +6,8 @@ import MobileBottomNav from '@/components/MobileBottomNav.vue'
 import { usePublishForm } from '@/features/seller/composables/usePublishForm'
 import { formatMoney } from '@/shared/utils/money'
 import type { AgreementContent } from '@/features/listings/api/listingOptions'
+import GuideImage from '@/components/GuideImage.vue'
+import tencentSecurityGuide from '@/assets/tencent-security-guide.webp'
 
 const {
   commonOnlineTimes,
@@ -115,6 +117,13 @@ function openPublishAgreement(agreement: AgreementContent) {
 function selectRadio<T extends string>(value: T, setter: (value: T) => void) {
   setter(value)
 }
+
+const unlockSaidOptions = ['是', '否']
+
+// 截图槽位的指导示例图（仅展示、点击放大，不占用上传数量）
+const screenshotGuides: Record<string, string> = {
+  tencentSecurity: tencentSecurityGuide,
+}
 </script>
 
 <template>
@@ -356,6 +365,23 @@ function selectRadio<T extends string>(value: T, setter: (value: T) => void) {
           优先推荐【账密登录】，出售速度约为扫码的数倍，两种方式安全性一致，账密登录更便捷，请自行衡量
         </p>
 
+        <van-field label="解锁赛伊德" required class="publish-field">
+          <template #input>
+            <div class="radio-group">
+              <button
+                v-for="opt in unlockSaidOptions"
+                :key="opt"
+                type="button"
+                class="radio-btn"
+                :class="{ active: form.unlock_said === opt }"
+                @click="selectRadio(opt, value => (form.unlock_said = value))"
+              >
+                {{ opt }}
+              </button>
+            </div>
+          </template>
+        </van-field>
+
         <div class="time-row">
           <div class="time-field-group">
             <van-field
@@ -487,6 +513,11 @@ function selectRadio<T extends string>(value: T, setter: (value: T) => void) {
               <small v-if="getScreenshotLimitHint(slot.key)">{{
                 getScreenshotLimitHint(slot.key)
               }}</small>
+              <GuideImage
+                v-if="screenshotGuides[slot.key]"
+                :src="screenshotGuides[slot.key] || ''"
+                label="点击查看处罚截图教程"
+              />
             </div>
             <div v-if="getScreenshotCount(slot.key)" class="upload-preview-list">
               <div

frontend/src/features/seller/views/SellerListingCreateView.vue

@@ -14,6 +14,8 @@ import { formatMoney } from '@/shared/utils/money'
 import type { AgreementContent } from '@/features/listings/api/listingOptions'
 import OptionChips from './components/OptionChips.vue'
 import PublishSection from './components/PublishSection.vue'
+import GuideImage from '@/components/GuideImage.vue'
+import tencentSecurityGuide from '@/assets/tencent-security-guide.webp'
 
 const {
   commonOnlineTimes,
@@ -115,6 +117,13 @@ const activeAgreement = ref<AgreementContent | null>(null)
 const activeAgreementTitle = computed(() => activeAgreement.value?.title || '协议内容')
 const activeAgreementContent = computed(() => activeAgreement.value?.content || '')
 
+const unlockSaidOptions = ['是', '否']
+
+// 截图槽位的指导示例图（仅展示、点击放大，不占用上传数量）
+const screenshotGuides: Record<string, string> = {
+  tencentSecurity: tencentSecurityGuide,
+}
+
 function toggleSkinOption(value: string | number) {
   toggleSkin(String(value))
 }
@@ -322,6 +331,15 @@ function selectDailyLoss(value: string | number) {
             </p>
           </div>
 
+          <div class="field-row panel-field-row">
+            <label>解锁赛伊德<span>*</span></label>
+            <OptionChips
+              :options="unlockSaidOptions"
+              :model-value="form.unlock_said"
+              @select="form.unlock_said = String($event)"
+            />
+          </div>
+
           <div class="time-preset-panel">
             <div class="time-preset-row">
               <strong>在线开始<span>*</span></strong>
@@ -427,6 +445,11 @@ function selectDailyLoss(value: string | number) {
                 <em v-if="getScreenshotLimitHint(slot.key)">{{
                   getScreenshotLimitHint(slot.key)
                 }}</em>
+                <GuideImage
+                  v-if="screenshotGuides[slot.key]"
+                  :src="screenshotGuides[slot.key] || ''"
+                  label="点击查看处罚截图教程"
+                />
               </div>
               <div v-if="getScreenshotCount(slot.key)" class="upload-preview-list">
                 <div

frontend/src/shared/types/publish.ts

@@ -15,6 +15,7 @@ export type PublishForm = {
   login_method: string
   online_start: string
   online_end: string
+  unlock_said: string
   ban_record: string
   common_regions: string[]
   depositAmountYuan: number | ''

frontend/src/shared/utils/listingDisplay.ts

@@ -133,6 +133,10 @@ export function getListingChips(item: Listing): ListingDisplayChip[] {
   if (online) {
     chips.push({ label: '方便上号', value: online })
   }
+  // 解锁赛伊德为必选项，仅在号主勾选「是」时展示
+  if (readAssetString(item, 'unlock_said') === '是') {
+    chips.push({ label: '解锁赛伊德', value: '是' })
+  }
   return chips.filter(chip => chip.value)
 }