feat(home): 首页品牌条文案支持后台配置

2026-11-13 11:06:27 +08:00
parent 5d7fedd915
commit d65b8d8089
13 changed files with 442 additions and 8 deletions
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { readError } from '@/shared/utils/error'
+import { ElMessage } from 'element-plus'
+import { ref, watch } from 'vue'
+
+import { defaultHomeBrandBar } from '@/features/listings/api/homeConfig'
+import { updateSystemConfig, type SystemConfig } from '@/features/admin/api/systemConfigs'
+import { safeParseJSON } from '@/shared/utils/json'
+
+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 eyebrow = ref('')
+const title = ref('')
+const subtitle = ref('')
+
+watch(
+  () => props.modelValue,
+  val => {
+    if (!val) return
+    const parsed = safeParseJSON(props.config.value, defaultHomeBrandBar)
+    eyebrow.value = normalizeText(parsed?.eyebrow, defaultHomeBrandBar.eyebrow)
+    title.value = normalizeText(parsed?.title, defaultHomeBrandBar.title)
+    subtitle.value = normalizeText(parsed?.subtitle, defaultHomeBrandBar.subtitle)
+    description.value = props.config.description || ''
+  },
+  { immediate: true }
+)
+
+function normalizeText(value: unknown, fallback: string) {
+  return typeof value === 'string' && value.trim() ? value.trim() : fallback
+}
+
+function resetHomeBrandBar() {
+  eyebrow.value = defaultHomeBrandBar.eyebrow
+  title.value = defaultHomeBrandBar.title
+  subtitle.value = defaultHomeBrandBar.subtitle
+}
+
+async function handleSave() {
+  submitting.value = true
+  try {
+    const value = JSON.stringify(
+      {
+        eyebrow: eyebrow.value.trim() || defaultHomeBrandBar.eyebrow,
+        title: title.value.trim() || defaultHomeBrandBar.title,
+        subtitle: subtitle.value.trim() || defaultHomeBrandBar.subtitle,
+      },
+      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
+  }
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="编辑首页品牌文案"
+    width="680px"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <div class="dialog-body">
+      <p class="config-key-label">
+        <strong>{{ config.key }}</strong>
+      </p>
+
+      <div class="home-config-editor">
+        <div class="editor-toolbar">
+          <span>品牌条文案</span>
+          <el-button size="small" @click="resetHomeBrandBar">恢复默认文案</el-button>
+        </div>
+        <el-form-item label="小标签" class="full-control">
+          <el-input
+            v-model="eyebrow"
+            maxlength="60"
+            show-word-limit
+            placeholder="例如：JIEYOU TRADING HOUSE · 账号租赁"
+          />
+        </el-form-item>
+        <el-form-item label="主标题" class="full-control">
+          <el-input v-model="title" maxlength="20" show-word-limit placeholder="例如：解忧柜选" />
+        </el-form-item>
+        <el-form-item label="服务承诺" class="full-control">
+          <el-input
+            v-model="subtitle"
+            maxlength="80"
+            show-word-limit
+            placeholder="例如：实名审核 · 流程留痕 · 账单透明 · 争议可申诉"
+          />
+        </el-form-item>
+        <p class="field-hint">留空的字段会自动回退到默认文案，保存后前台刷新页面即可生效。</p>
+      </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;
+}
+
+.config-key-label {
+  margin: 0;
+  color: #374151;
+}
+
+.home-config-editor {
+  display: grid;
+  gap: 14px;
+}
+
+.editor-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.editor-toolbar span {
+  color: #30343a;
+  font-weight: 700;
+}
+
+.full-control {
+  width: 100%;
+}
+
+.field-hint {
+  margin: 0;
+  color: #6b7280;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.desc-item {
+  margin-top: 14px;
+  margin-bottom: 0;
+}
+</style>