优化弹窗和后台设置字体

frontend/src/features/admin/components/OrderAgreementsDialog.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { ref, watch } from 'vue'
+
+import { updateSystemConfig, type SystemConfig } from '@/features/admin/api/systemConfigs'
+import type { OrderAgreements } from '@/features/orders/api/orders'
+import { safeParseJSON } from '@/utils/json'
+
+const defaultOrderAgreements: OrderAgreements = {
+  virtual_asset_purchase: {
+    title: '虚拟资产购买协议',
+    content: `请您在下单前仔细阅读并确认以下内容：
+
+一、交易性质
+1. 本平台商品涉及游戏账号租用期间的虚拟资产使用权益、租金和押金托管服务。
+2. 虚拟资产、游戏账号及相关数据均受游戏厂商规则约束，平台不承诺虚拟资产具备现实货币价值或永久可用性。
+3. 您下单即表示已理解商品页面展示的哈夫币、装备、皮肤、消耗品、租期、押金和交接规则。
+
+二、风险告知
+1. 游戏厂商可能因版本更新、风控策略、账号安全策略等因素调整游戏资产状态。
+2. 因租客违规操作、使用外挂、恶意消耗、转移资产、私下交易或违反游戏规则造成的损失，可能从押金中扣除或进入争议处理。
+3. 请勿绕过平台私下付款、私下交接或私下协商退款，否则平台可能无法保障您的资金与交易权益。
+
+三、费用与结算
+1. 订单租金、押金和可能产生的额外消耗品费用以平台订单和结账页面展示为准。
+2. 未实际使用完的租金或剩余押金，将按平台结账规则退回。
+3. 若发生争议，平台将依据订单记录、聊天记录、截图证据和双方说明进行处理。`,
+  },
+  renter_agreement: {
+    title: '租客协议',
+    content: `请您作为租客在下单前确认并遵守以下约定：
+
+一、账号使用义务
+1. 您仅可在订单约定时间内按商品说明使用账号，不得转租、转借、出售、赠与或用于任何非订单目的。
+2. 您不得使用外挂、脚本、漏洞、恶意组队、违规交易、消极比赛、辱骂举报等可能导致账号异常的行为。
+3. 您不得修改账号绑定信息、登录凭证、安全设置、实名信息或任何影响号主取回账号的内容。
+
+二、资产保护义务
+1. 您应按商品详情和订单快照合理使用哈夫币、装备、物资、皮肤及其他虚拟资产。
+2. 额外消耗品、哈夫币消耗、违规损失、封禁损失等应在结账时如实登记。
+3. 因您未按约定使用账号造成的损失，平台可根据证据从押金中扣除相应赔付。
+
+三、交接与结账
+1. 下单后请通过平台流程完成交接、沟通、归还和结账，不要私下交易。
+2. 租用结束后请及时发起结账并说明资产状态；号主确认或双方完成争议处理后，订单结算完成。
+3. 您同意平台依据订单记录、资产快照、聊天记录、截图证据和相关规则处理退款、赔付及争议。`,
+  },
+}
+
+const props = defineProps<{
+  modelValue: boolean
+  config: SystemConfig
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: boolean): void
+  (e: 'saved'): void
+}>()
+
+const submitting = ref(false)
+const description = ref('')
+const draft = ref<OrderAgreements>(cloneAgreements(defaultOrderAgreements))
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) {
+      draft.value = parseOrderAgreements(props.config.value)
+      description.value = props.config.description || ''
+    }
+  },
+  { immediate: true },
+)
+
+function parseOrderAgreements(raw: string) {
+  const parsed = safeParseJSON(raw, defaultOrderAgreements)
+  return cloneAgreements({
+    virtual_asset_purchase: {
+      title: readText(parsed?.virtual_asset_purchase?.title, defaultOrderAgreements.virtual_asset_purchase.title),
+      content: readText(parsed?.virtual_asset_purchase?.content, defaultOrderAgreements.virtual_asset_purchase.content),
+    },
+    renter_agreement: {
+      title: readText(parsed?.renter_agreement?.title, defaultOrderAgreements.renter_agreement.title),
+      content: readText(parsed?.renter_agreement?.content, defaultOrderAgreements.renter_agreement.content),
+    },
+  })
+}
+
+function readText(value: unknown, fallback: string) {
+  return typeof value === 'string' && value.trim() ? value : fallback
+}
+
+function cloneAgreements(value: OrderAgreements) {
+  return JSON.parse(JSON.stringify(value)) as OrderAgreements
+}
+
+function resetDefaults() {
+  draft.value = cloneAgreements(defaultOrderAgreements)
+}
+
+async function handleSave() {
+  submitting.value = true
+  try {
+    const value = JSON.stringify(draft.value, null, 2)
+    await updateSystemConfig(props.config.key, {
+      value,
+      description: description.value,
+    })
+    ElMessage.success('协议配置已更新')
+    emit('saved')
+    emit('update:modelValue', false)
+  } catch (error) {
+    ElMessage.error(readError(error, '保存失败'))
+  } finally {
+    submitting.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
+    return response?.data?.message || fallback
+  }
+  return fallback
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="编辑下单协议"
+    width="860px"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <div class="dialog-body">
+      <div class="dialog-header">
+        <p class="config-key-label"><strong>{{ config.key }}</strong></p>
+        <el-button size="small" @click="resetDefaults">恢复默认文本</el-button>
+      </div>
+
+      <div class="agreement-editor-grid">
+        <section class="agreement-editor-card">
+          <div class="agreement-card-title">虚拟资产购买协议</div>
+          <el-form-item label="协议标题" class="full-control">
+            <el-input v-model="draft.virtual_asset_purchase.title" placeholder="请输入协议标题" />
+          </el-form-item>
+          <el-form-item label="协议正文" class="full-control">
+            <el-input
+              v-model="draft.virtual_asset_purchase.content"
+              type="textarea"
+              :rows="14"
+              resize="vertical"
+              placeholder="请输入协议正文"
+            />
+          </el-form-item>
+        </section>
+
+        <section class="agreement-editor-card">
+          <div class="agreement-card-title">租客协议</div>
+          <el-form-item label="协议标题" class="full-control">
+            <el-input v-model="draft.renter_agreement.title" placeholder="请输入协议标题" />
+          </el-form-item>
+          <el-form-item label="协议正文" class="full-control">
+            <el-input
+              v-model="draft.renter_agreement.content"
+              type="textarea"
+              :rows="14"
+              resize="vertical"
+              placeholder="请输入协议正文"
+            />
+          </el-form-item>
+        </section>
+      </div>
+
+      <el-form-item label="配置说明" class="desc-item">
+        <el-input v-model="description" type="textarea" :rows="3" placeholder="配置说明" />
+      </el-form-item>
+    </div>
+    <template #footer>
+      <el-button @click="emit('update:modelValue', false)">取消</el-button>
+      <el-button type="primary" :loading="submitting" @click="handleSave">保存</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.dialog-body {
+  display: grid;
+  gap: 16px;
+  max-height: 68vh;
+  overflow-y: auto;
+  padding-right: 8px;
+}
+
+.dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.config-key-label {
+  margin: 0;
+  color: #374151;
+}
+
+.agreement-editor-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.agreement-editor-card {
+  display: grid;
+  gap: 12px;
+  padding: 14px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #f9fafb;
+}
+
+.agreement-card-title {
+  color: #111827;
+  font-weight: 700;
+}
+
+.full-control,
+.desc-item {
+  margin-bottom: 0;
+}
+
+@media (max-width: 900px) {
+  .agreement-editor-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

frontend/src/features/admin/views/AdminSystemConfigsView.vue

@@ -15,6 +15,7 @@ import {
   mergeHomeConfig,
   type HomeBannerSlide,
 } from '@/features/listings/api/homeConfig'
+import type { OrderAgreements } from '@/features/orders/api/orders'
 import { fetchSystemConfigs, type SystemConfig } from '@/features/admin/api/systemConfigs'
 import { formatDateTime } from '@/utils/time'
 import { safeParseJSON } from '@/utils/json'
@@ -25,9 +26,21 @@ import PublishOptionsDialog from '../components/PublishOptionsDialog.vue'
 import SalePriceDialog from '../components/SalePriceDialog.vue'
 import HomeAnnouncementsDialog from '../components/HomeAnnouncementsDialog.vue'
 import HomeBannersDialog from '../components/HomeBannersDialog.vue'
+import OrderAgreementsDialog from '../components/OrderAgreementsDialog.vue'
 import GeneralConfigDialog from '../components/GeneralConfigDialog.vue'
 import AutoWelcomeConfig from '../components/AutoWelcomeConfig.vue'
 
+const defaultOrderAgreements: OrderAgreements = {
+  virtual_asset_purchase: {
+    title: '虚拟资产购买协议',
+    content: '',
+  },
+  renter_agreement: {
+    title: '租客协议',
+    content: '',
+  },
+}
+
 const loading = ref(false)
 const configs = ref<SystemConfig[]>([])
 const currentEditingConfig = ref<SystemConfig | null>(null)
@@ -37,12 +50,14 @@ const publishVisible = ref(false)
 const salePriceVisible = ref(false)
 const announcementsVisible = ref(false)
 const bannersVisible = ref(false)
+const agreementsVisible = ref(false)
 const generalVisible = ref(false)
 
 const publishConfig = computed(() => configs.value.find((item) => item.key === 'listing.publish_options') || null)
 const salePriceConfig = computed(() => configs.value.find((item) => item.key === 'listing.sale_price_config') || null)
 const homeAnnouncementsConfig = computed(() => configs.value.find((item) => item.key === 'mobile.home_announcements') || null)
 const homeBannersConfig = computed(() => configs.value.find((item) => item.key === 'mobile.home_banners') || null)
+const orderAgreementsConfig = computed(() => configs.value.find((item) => item.key === 'order.agreements') || null)
 
 const regularConfigs = computed(() =>
   configs.value.filter(
@@ -50,7 +65,8 @@ const regularConfigs = computed(() =>
       item.key !== 'listing.publish_options' &&
       item.key !== 'listing.sale_price_config' &&
       item.key !== 'mobile.home_announcements' &&
-      item.key !== 'mobile.home_banners',
+      item.key !== 'mobile.home_banners' &&
+      item.key !== 'order.agreements',
   ),
 )
 
@@ -87,6 +103,16 @@ const homeStats = computed(() => {
   }
 })
 
+const agreementStats = computed(() => {
+  const agreements = parseOrderAgreements(orderAgreementsConfig.value?.value || '')
+  return {
+    virtualTitle: agreements.virtual_asset_purchase.title || '购买协议',
+    renterTitle: agreements.renter_agreement.title || '租客协议',
+    virtualWords: countContentWords(agreements.virtual_asset_purchase.content),
+    renterWords: countContentWords(agreements.renter_agreement.content),
+  }
+})
+
 onMounted(loadConfigs)
 
 async function loadConfigs() {
@@ -108,6 +134,8 @@ function openEdit(row: SystemConfig) {
     announcementsVisible.value = true
   } else if (row.key === 'mobile.home_banners') {
     bannersVisible.value = true
+  } else if (row.key === 'order.agreements') {
+    agreementsVisible.value = true
   } else {
     generalVisible.value = true
   }
@@ -133,6 +161,28 @@ function parseHomeBanners(raw: string) {
   return cloneHomeBanners(mergeHomeConfig({ banners: Array.isArray(parsed) ? parsed : [] }).banners)
 }
 
+function parseOrderAgreements(raw: string) {
+  const parsed = safeParseJSON(raw, defaultOrderAgreements)
+  return {
+    virtual_asset_purchase: {
+      title: readText(parsed.virtual_asset_purchase?.title, defaultOrderAgreements.virtual_asset_purchase.title),
+      content: readText(parsed.virtual_asset_purchase?.content, defaultOrderAgreements.virtual_asset_purchase.content),
+    },
+    renter_agreement: {
+      title: readText(parsed.renter_agreement?.title, defaultOrderAgreements.renter_agreement.title),
+      content: readText(parsed.renter_agreement?.content, defaultOrderAgreements.renter_agreement.content),
+    },
+  }
+}
+
+function readText(value: unknown, fallback: string) {
+  return typeof value === 'string' && value.trim() ? value : fallback
+}
+
+function countContentWords(value: string) {
+  return value.replace(/\s/g, '').length
+}
+
 function cloneOptions(options: ListingPublishOptions) {
   return JSON.parse(JSON.stringify(options)) as ListingPublishOptions
 }
@@ -273,6 +323,39 @@ function formatConfigValue(row: SystemConfig) {
       </div>
     </section>
 
+    <section v-if="orderAgreementsConfig" class="publish-config-panel">
+      <div class="publish-config-main">
+        <div>
+          <p class="eyebrow">Order Agreements</p>
+          <h2>下单协议配置</h2>
+          <span>管理下单前必须阅读并勾选确认的虚拟资产购买协议和租客协议。</span>
+        </div>
+        <el-button type="primary" @click="openEdit(orderAgreementsConfig)">编辑协议</el-button>
+      </div>
+      <div class="publish-stat-grid home-stat-grid">
+        <div class="publish-stat">
+          <strong>2</strong>
+          <span>协议数量</span>
+        </div>
+        <div class="publish-stat">
+          <strong>{{ agreementStats.virtualWords }}</strong>
+          <span>{{ agreementStats.virtualTitle }}字数</span>
+        </div>
+        <div class="publish-stat">
+          <strong>{{ agreementStats.renterWords }}</strong>
+          <span>{{ agreementStats.renterTitle }}字数</span>
+        </div>
+        <div class="publish-stat">
+          <strong>接口</strong>
+          <span>/api/order-agreements</span>
+        </div>
+        <div class="publish-stat">
+          <strong>更新</strong>
+          <span>{{ formatHomeConfigStatus(orderAgreementsConfig, '未初始化') }}</span>
+        </div>
+      </div>
+    </section>
+
     <AutoWelcomeConfig />
 
     <el-table v-loading="loading" class="table-panel" :data="regularConfigs">
@@ -324,6 +407,13 @@ function formatConfigValue(row: SystemConfig) {
       @saved="loadConfigs"
     />
 
+    <OrderAgreementsDialog
+      v-if="orderAgreementsConfig"
+      v-model="agreementsVisible"
+      :config="orderAgreementsConfig"
+      @saved="loadConfigs"
+    />
+
     <GeneralConfigDialog
       v-if="currentEditingConfig"
       v-model="generalVisible"
@@ -398,6 +488,19 @@ function formatConfigValue(row: SystemConfig) {
   font-size: 13px;
 }
 
+/* 按钮文字清晰度优化 */
+:deep(.el-button--primary) {
+  font-weight: 700;
+}
+
+:deep(.el-button--primary span) {
+  color: #ffffff !important;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  font-weight: 700;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 @media (max-width: 1100px) {
   .publish-stat-grid {
     grid-template-columns: repeat(3, minmax(0, 1fr));

frontend/src/features/listings/views/ListingDetailView.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ElMessage } from "element-plus";
-import { computed, onMounted, ref } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
 import { fetchListing, type Listing } from "@/features/listings/api/listings";
-import { createOrder } from "@/features/orders/api/orders";
+import { createOrder, fetchOrderAgreements, type OrderAgreements } from "@/features/orders/api/orders";
 import { useSessionStore } from "@/stores/session";
 import { roundMoney, formatMoney } from "@/shared/utils/money";
 import {
@@ -33,6 +33,23 @@ const router = useRouter();
 const session = useSessionStore();
 const loading = ref(false);
 const ordering = ref(false);
+const agreementsLoading = ref(false);
+const agreementVisible = ref(false);
+const agreements = ref<OrderAgreements | null>(null);
+const virtualAgreementRead = ref(false);
+const renterAgreementRead = ref(false);
+const virtualAgreementChecked = ref(false);
+const renterAgreementChecked = ref(false);
+const virtualAgreementRef = ref<HTMLElement | null>(null);
+const renterAgreementRef = ref<HTMLElement | null>(null);
+
+const canCreateOrderAfterAgreement = computed(
+  () =>
+    virtualAgreementRead.value &&
+    renterAgreementRead.value &&
+    virtualAgreementChecked.value &&
+    renterAgreementChecked.value,
+);
 const listing = ref<Listing | null>(null);
 
 onMounted(async () => {
@@ -137,6 +154,61 @@ async function handleCreateOrder() {
     return;
   }
 
+  if (session.realnameStatus !== "verified") {
+    try {
+      await session.loadMe();
+    } catch {
+      // 登录态失效时由全局请求拦截处理。
+    }
+  }
+
+  if (session.realnameStatus !== "verified") {
+    try {
+      await ElMessageBox.confirm("租号下单前需要完成实名认证。", "请先实名认证", {
+        confirmButtonText: "去认证",
+        cancelButtonText: "取消",
+        type: "warning",
+      });
+      await router.push({ path: "/realname", query: { redirect: route.fullPath } });
+    } catch {
+      // 用户取消认证时停留在当前页面。
+    }
+    return;
+  }
+
+  await openAgreementBeforeOrder();
+}
+
+async function openAgreementBeforeOrder() {
+  agreementsLoading.value = true;
+  try {
+    agreements.value = await fetchOrderAgreements();
+    virtualAgreementRead.value = false;
+    renterAgreementRead.value = false;
+    virtualAgreementChecked.value = false;
+    renterAgreementChecked.value = false;
+    agreementVisible.value = true;
+    await nextTick();
+    updateAgreementReadState("virtual");
+    updateAgreementReadState("renter");
+  } catch (error) {
+    ElMessage.error(readError(error, "协议加载失败"));
+  } finally {
+    agreementsLoading.value = false;
+  }
+}
+
+async function handleConfirmAgreementAndCreateOrder() {
+  if (!canCreateOrderAfterAgreement.value) {
+    ElMessage.warning("请先阅读并勾选两份协议");
+    return;
+  }
+  agreementVisible.value = false;
+  await submitOrder();
+}
+
+async function submitOrder() {
+  if (!listing.value) return;
   ordering.value = true;
   try {
     const order = await createOrder(listing.value.id);
@@ -149,6 +221,21 @@ async function handleCreateOrder() {
   }
 }
 
+function handleAgreementScroll(type: "virtual" | "renter") {
+  updateAgreementReadState(type);
+}
+
+function updateAgreementReadState(type: "virtual" | "renter") {
+  const el = type === "virtual" ? virtualAgreementRef.value : renterAgreementRef.value;
+  if (!el) return;
+  const read = el.scrollTop + el.clientHeight >= el.scrollHeight - 8;
+  if (type === "virtual") {
+    virtualAgreementRead.value = read;
+  } else {
+    renterAgreementRead.value = read;
+  }
+}
+
 function readError(error: unknown, fallback: string) {
   if (typeof error === "object" && error && "response" in error) {
     const response = (error as { response?: { data?: { message?: string } } })
@@ -158,6 +245,43 @@ function readError(error: unknown, fallback: string) {
   return fallback;
 }
 
+// 手动锁定/解锁背景滚动
+watch(agreementVisible, (visible) => {
+  // 只锁定 .pc-main 容器，不影响 body 和 sticky 导航栏
+  const pcMain = document.querySelector('.pc-main') as HTMLElement;
+  if (!pcMain) return;
+
+  if (visible) {
+    // 保存当前滚动位置
+    const scrollTop = pcMain.scrollTop || 0;
+
+    // 锁定主容器滚动
+    pcMain.style.overflow = 'hidden';
+    pcMain.style.position = 'fixed';
+    pcMain.style.top = `-${scrollTop}px`;
+    pcMain.style.left = '0';
+    pcMain.style.right = '0';
+    pcMain.style.width = '100%';
+
+    // 保存滚动位置供恢复使用
+    pcMain.dataset.scrollTop = String(scrollTop);
+  } else {
+    // 恢复主容器滚动
+    const scrollTop = parseInt(pcMain.dataset.scrollTop || '0', 10);
+
+    pcMain.style.overflow = '';
+    pcMain.style.position = '';
+    pcMain.style.top = '';
+    pcMain.style.left = '';
+    pcMain.style.right = '';
+    pcMain.style.width = '';
+
+    // 恢复滚动位置
+    pcMain.scrollTop = scrollTop;
+    delete pcMain.dataset.scrollTop;
+  }
+});
+
 function listingPrice(item: Listing) {
   return formatMoney(getListingDisplayPrice(item));
 }
@@ -311,7 +435,7 @@ function listingPrice(item: Listing) {
           <el-button
             type="warning"
             size="large"
-            :loading="ordering"
+            :loading="ordering || agreementsLoading"
             :disabled="listing.in_transaction"
             class="full-control"
             @click="handleCreateOrder"
@@ -321,6 +445,59 @@ function listingPrice(item: Listing) {
         </el-form>
       </aside>
     </div>
+
+    <el-dialog
+      v-model="agreementVisible"
+      title="下单协议确认"
+      width="860px"
+      class="order-agreement-dialog"
+      :close-on-click-modal="false"
+    >
+      <div v-if="agreements" class="agreement-dialog-body">
+        <p class="agreement-tip">请完整阅读并勾选以下两份协议后继续下单。</p>
+        <div class="agreement-grid">
+          <section class="agreement-panel">
+            <h3>{{ agreements.virtual_asset_purchase.title }}</h3>
+            <div
+              ref="virtualAgreementRef"
+              class="agreement-content"
+              @scroll="handleAgreementScroll('virtual')"
+            >
+              {{ agreements.virtual_asset_purchase.content }}
+            </div>
+            <el-checkbox v-model="virtualAgreementChecked" :disabled="!virtualAgreementRead">
+              我已阅读并同意《{{ agreements.virtual_asset_purchase.title }}》
+            </el-checkbox>
+            <span v-if="!virtualAgreementRead" class="agreement-read-hint">请下拉阅读至底部</span>
+          </section>
+          <section class="agreement-panel">
+            <h3>{{ agreements.renter_agreement.title }}</h3>
+            <div
+              ref="renterAgreementRef"
+              class="agreement-content"
+              @scroll="handleAgreementScroll('renter')"
+            >
+              {{ agreements.renter_agreement.content }}
+            </div>
+            <el-checkbox v-model="renterAgreementChecked" :disabled="!renterAgreementRead">
+              我已阅读并同意《{{ agreements.renter_agreement.title }}》
+            </el-checkbox>
+            <span v-if="!renterAgreementRead" class="agreement-read-hint">请下拉阅读至底部</span>
+          </section>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="agreementVisible = false">取消</el-button>
+        <el-button
+          type="primary"
+          :loading="ordering"
+          :disabled="!canCreateOrderAfterAgreement"
+          @click="handleConfirmAgreementAndCreateOrder"
+        >
+          同意协议并下单
+        </el-button>
+      </template>
+    </el-dialog>
   </section>
 </template>
 
@@ -713,6 +890,57 @@ function listingPrice(item: Listing) {
   text-align: right;
 }
 
+.agreement-dialog-body {
+  display: grid;
+  gap: 14px;
+}
+
+.agreement-tip {
+  margin: 0;
+  color: #64748b;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.agreement-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.agreement-panel {
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+}
+
+.agreement-panel h3 {
+  margin: 0;
+  color: #17233d;
+  font-size: 16px;
+  font-weight: 900;
+}
+
+.agreement-content {
+  height: 260px;
+  overflow: auto;
+  border: 1px solid #d8dee9;
+  border-radius: 8px;
+  background: #f8fafc;
+  padding: 14px;
+  color: #1f2937;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.75;
+  white-space: pre-wrap;
+}
+
+.agreement-read-hint {
+  color: #f97316;
+  font-size: 12px;
+  font-weight: 800;
+}
+
 @media (max-width: 1180px) {
   .pc-detail-layout,
   .detail-screenshot-grid {
@@ -746,5 +974,9 @@ function listingPrice(item: Listing) {
   .detail-resource-grid {
     grid-template-columns: 1fr;
   }
+
+  .agreement-grid {
+    grid-template-columns: 1fr;
+  }
 }
 </style>

frontend/src/features/listings/views/MobileListingDetailView.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
+import { computed, nextTick, onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { showToast, showDialog } from "vant";
 
 import { fetchListing, type Listing } from "@/features/listings/api/listings";
-import { createOrder } from "@/features/orders/api/orders";
+import { createOrder, fetchOrderAgreements, type OrderAgreements } from "@/features/orders/api/orders";
 import { useSessionStore } from "@/stores/session";
 import { formatMoney } from "@/shared/utils/money";
 import {
@@ -30,7 +30,24 @@ const router = useRouter();
 const session = useSessionStore();
 const loading = ref(false);
 const ordering = ref(false);
+const agreementsLoading = ref(false);
+const agreementVisible = ref(false);
 const listing = ref<Listing | null>(null);
+const agreements = ref<OrderAgreements | null>(null);
+const virtualAgreementRead = ref(false);
+const renterAgreementRead = ref(false);
+const virtualAgreementChecked = ref(false);
+const renterAgreementChecked = ref(false);
+const virtualAgreementRef = ref<HTMLElement | null>(null);
+const renterAgreementRef = ref<HTMLElement | null>(null);
+
+const canCreateOrderAfterAgreement = computed(
+  () =>
+    virtualAgreementRead.value &&
+    renterAgreementRead.value &&
+    virtualAgreementChecked.value &&
+    renterAgreementChecked.value,
+);
 
 onMounted(async () => {
   loading.value = true;
@@ -145,6 +162,39 @@ async function handleCreateOrder() {
     return;
   }
 
+  await openAgreementBeforeOrder();
+}
+
+async function openAgreementBeforeOrder() {
+  agreementsLoading.value = true;
+  try {
+    agreements.value = await fetchOrderAgreements();
+    virtualAgreementRead.value = false;
+    renterAgreementRead.value = false;
+    virtualAgreementChecked.value = false;
+    renterAgreementChecked.value = false;
+    agreementVisible.value = true;
+    await nextTick();
+    updateAgreementReadState("virtual");
+    updateAgreementReadState("renter");
+  } catch (error) {
+    showToast({ message: readError(error, "协议加载失败"), icon: "cross" });
+  } finally {
+    agreementsLoading.value = false;
+  }
+}
+
+async function handleConfirmAgreementAndCreateOrder() {
+  if (!canCreateOrderAfterAgreement.value) {
+    showToast("请先阅读并勾选两份协议");
+    return;
+  }
+  agreementVisible.value = false;
+  await submitOrder();
+}
+
+async function submitOrder() {
+  if (!listing.value) return;
   ordering.value = true;
   try {
     await createOrder(listing.value.id);
@@ -157,6 +207,21 @@ async function handleCreateOrder() {
   }
 }
 
+function handleAgreementScroll(type: "virtual" | "renter") {
+  updateAgreementReadState(type);
+}
+
+function updateAgreementReadState(type: "virtual" | "renter") {
+  const el = type === "virtual" ? virtualAgreementRef.value : renterAgreementRef.value;
+  if (!el) return;
+  const read = el.scrollTop + el.clientHeight >= el.scrollHeight - 8;
+  if (type === "virtual") {
+    virtualAgreementRead.value = read;
+  } else {
+    renterAgreementRead.value = read;
+  }
+}
+
 function readError(error: unknown, fallback: string) {
   if (typeof error === "object" && error && "response" in error) {
     const response = (error as { response?: { data?: { message?: string } } })
@@ -334,7 +399,7 @@ function isNavActive(path: string) {
           type="primary"
           round
           class="order-btn"
-          :loading="ordering"
+          :loading="ordering || agreementsLoading"
           :disabled="listing.in_transaction"
           loading-text="下单中..."
           @click="handleCreateOrder"
@@ -342,6 +407,52 @@ function isNavActive(path: string) {
           {{ listing.in_transaction ? "交易中" : "立即下单" }}
         </van-button>
       </div>
+
+      <van-popup v-model:show="agreementVisible" round closeable position="bottom" lock-scroll class="agreement-popup">
+        <div v-if="agreements" class="agreement-popup-body">
+          <h3>下单协议确认</h3>
+          <p>请完整阅读并勾选以下两份协议后继续下单。</p>
+          <section class="agreement-panel">
+            <strong>{{ agreements.virtual_asset_purchase.title }}</strong>
+            <div
+              ref="virtualAgreementRef"
+              class="agreement-content"
+              @scroll="handleAgreementScroll('virtual')"
+            >
+              {{ agreements.virtual_asset_purchase.content }}
+            </div>
+            <van-checkbox v-model="virtualAgreementChecked" :disabled="!virtualAgreementRead" icon-size="18px">
+              我已阅读并同意《{{ agreements.virtual_asset_purchase.title }}》
+            </van-checkbox>
+            <span v-if="!virtualAgreementRead" class="agreement-read-hint">请下拉阅读至底部</span>
+          </section>
+          <section class="agreement-panel">
+            <strong>{{ agreements.renter_agreement.title }}</strong>
+            <div
+              ref="renterAgreementRef"
+              class="agreement-content"
+              @scroll="handleAgreementScroll('renter')"
+            >
+              {{ agreements.renter_agreement.content }}
+            </div>
+            <van-checkbox v-model="renterAgreementChecked" :disabled="!renterAgreementRead" icon-size="18px">
+              我已阅读并同意《{{ agreements.renter_agreement.title }}》
+            </van-checkbox>
+            <span v-if="!renterAgreementRead" class="agreement-read-hint">请下拉阅读至底部</span>
+          </section>
+          <van-button
+            block
+            round
+            type="primary"
+            class="agreement-confirm-btn"
+            :loading="ordering"
+            :disabled="!canCreateOrderAfterAgreement"
+            @click="handleConfirmAgreementAndCreateOrder"
+          >
+            同意协议并下单
+          </van-button>
+        </div>
+      </van-popup>
     </template>
 
     <!-- 空状态 -->
@@ -721,6 +832,69 @@ function isNavActive(path: string) {
   border: none !important;
 }
 
+.agreement-popup {
+  max-height: 92vh;
+}
+
+.agreement-popup-body {
+  display: grid;
+  gap: 12px;
+  max-height: 92vh;
+  overflow: auto;
+  padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
+}
+
+.agreement-popup-body h3 {
+  margin: 0;
+  color: #17233d;
+  font-size: 18px;
+  font-weight: 900;
+}
+
+.agreement-popup-body > p {
+  margin: 0;
+  color: #6b7280;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.agreement-panel {
+  display: grid;
+  gap: 8px;
+}
+
+.agreement-panel > strong {
+  color: #17233d;
+  font-size: 14px;
+}
+
+.agreement-content {
+  height: 190px;
+  overflow: auto;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #f8fafc;
+  padding: 12px;
+  color: #1f2937;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.7;
+  white-space: pre-wrap;
+}
+
+.agreement-read-hint {
+  color: #ff6a00;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.agreement-confirm-btn {
+  margin-top: 4px;
+  background: #ff6a00 !important;
+  border: none !important;
+  font-weight: 800;
+}
+
 /* ========== 空状态 ========== */
 .empty-state {
   display: flex;

frontend/src/features/orders/api/orders.ts

@@ -98,6 +98,16 @@ export interface PayOrderResult {
   paid: boolean
 }
 
+export interface OrderAgreementContent {
+  title: string
+  content: string
+}
+
+export interface OrderAgreements {
+  virtual_asset_purchase: OrderAgreementContent
+  renter_agreement: OrderAgreementContent
+}
+
 export interface SubmitCheckoutPayload {
   content: string
   consumable_amount: number
@@ -122,6 +132,11 @@ export async function createOrder(listingId: number) {
   return data.data
 }
 
+export async function fetchOrderAgreements() {
+  const { data } = await apiClient.get<ApiResponse<OrderAgreements>>('/order-agreements')
+  return data.data
+}
+
 export async function payOrder(id: number) {
   const { data } = await apiClient.post<ApiResponse<PayOrderResult>>(`/orders/${id}/pay`)
   return data.data

frontend/src/styles/admin.css

@@ -338,6 +338,20 @@
   max-width: 720px;
 }
 
+/* ========== Button Enhancements ========== */
+.el-button--primary {
+  font-weight: 700 !important;
+  --el-button-text-color: #ffffff;
+  --el-button-hover-text-color: #ffffff;
+  --el-button-active-text-color: #ffffff;
+}
+
+.el-button--primary span {
+  color: #ffffff !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+  font-weight: 700;
+}
+
 .eyebrow {
   margin: 0 0 8px;
   color: #4f7cff;
@@ -349,10 +363,11 @@
 
 h1 {
   margin: 0;
-  color: #1b2559;
-  font-size: 28px;
-  font-weight: 800;
+  color: #0f172a;
+  font-size: 32px;
+  font-weight: 900;
   line-height: 1.2;
+  letter-spacing: -0.5px;
 }
 
 .page-header p:last-child {