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-05 03:06:09 +08:00
parent 498e3d7bde
commit 3c28297dee
12 changed files with 910 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/admin/components/OrderAgreementsDialog.vue
+237
View File
@@ -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
+104 -1
View File
@@ -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));