hfb_jysh/admin-web/src/features/admin/components/HomeBrandBarDialog.vue

<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>