增加发布协议确认配置

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

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { Delete, DocumentChecked, Picture, RefreshRight, UploadFilled } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { computed, ref } from 'vue'
 
 import { usePublishForm } from '@/features/seller/composables/usePublishForm'
+import type { AgreementContent } from '@/features/listings/api/listingOptions'
 import OptionChips from './components/OptionChips.vue'
 import PublishSection from './components/PublishSection.vue'
 
@@ -12,6 +14,10 @@ const {
   formatNumber,
   loading,
   uploading,
+  publishAgreements,
+  virtualAssetSaleAgreementChecked,
+  sellerAgreementChecked,
+  canPublishAfterAgreements,
   fileInput,
   activeUploadKey,
   form,
@@ -83,10 +89,20 @@ const {
   notifyError: (message) => ElMessage.error(message),
 })
 
+const agreementDialogVisible = ref(false)
+const activeAgreement = ref<AgreementContent | null>(null)
+const activeAgreementTitle = computed(() => activeAgreement.value?.title || '协议内容')
+const activeAgreementContent = computed(() => activeAgreement.value?.content || '')
+
 function toggleSkinOption(value: string | number) {
   toggleSkin(String(value))
 }
 
+function openPublishAgreement(agreement: AgreementContent) {
+  activeAgreement.value = agreement
+  agreementDialogVisible.value = true
+}
+
 function selectDailyLoss(value: string | number) {
   form.daily_loss_m = Number(value)
 }
@@ -510,14 +526,55 @@ function selectOnlineEnd(value: string | number) {
               <strong>{{ uploadedScreenshotCount }}/{{ requiredScreenshotCount }}</strong>
             </div>
           </div>
+          <div class="publish-agreement-panel">
+            <el-checkbox v-model="virtualAssetSaleAgreementChecked">
+              <span class="agreement-check-label">
+                我已阅读并同意
+                <button
+                  type="button"
+                  class="agreement-link"
+                  :title="publishAgreements.virtual_asset_sale.title"
+                  @click.prevent.stop="openPublishAgreement(publishAgreements.virtual_asset_sale)"
+                >
+                  《{{ publishAgreements.virtual_asset_sale.title }}》
+                </button>
+              </span>
+            </el-checkbox>
+            <el-checkbox v-model="sellerAgreementChecked">
+              <span class="agreement-check-label">
+                我已阅读并同意
+                <button
+                  type="button"
+                  class="agreement-link"
+                  :title="publishAgreements.seller_agreement.title"
+                  @click.prevent.stop="openPublishAgreement(publishAgreements.seller_agreement)"
+                >
+                  《{{ publishAgreements.seller_agreement.title }}》
+                </button>
+              </span>
+            </el-checkbox>
+          </div>
           <div class="summary-actions">
-            <el-button :icon="UploadFilled" class="btn-publish" type="primary" :loading="loading" @click="handleSubmit">立即发布</el-button>
+            <el-button
+              :icon="UploadFilled"
+              class="btn-publish"
+              type="primary"
+              :loading="loading"
+              :disabled="!canPublishAfterAgreements"
+              @click="handleSubmit"
+            >
+              立即发布
+            </el-button>
             <el-button :icon="DocumentChecked" :disabled="loading" @click="handleSaveDraft">保存草稿</el-button>
             <el-button :icon="RefreshRight" :disabled="loading" @click="handleResetDraft">重置草稿</el-button>
           </div>
         </div>
       </aside>
     </div>
+
+    <el-dialog v-model="agreementDialogVisible" :title="activeAgreementTitle" width="720px" class="publish-agreement-dialog">
+      <div class="agreement-dialog-content">{{ activeAgreementContent }}</div>
+    </el-dialog>
   </main>
 </template>