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

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

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

admin-web/src/features/admin/views/AdminSystemConfigsView.vue

@@ -38,6 +38,7 @@ 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 HomeBrandBarDialog from '../components/HomeBrandBarDialog.vue'
 import AwRecycleDialog from '../components/AwRecycleDialog.vue'
 import {
   defaultAWRecycleConfig,
@@ -92,6 +93,7 @@ const salePriceVisible = ref(false)
 const qualityOwnerVisible = ref(false)
 const announcementsVisible = ref(false)
 const bannersVisible = ref(false)
+const brandBarVisible = ref(false)
 const awRecycleVisible = ref(false)
 const cooperationFeedbackVisible = ref(false)
 const listingPublishAgreementsVisible = ref(false)
@@ -134,6 +136,9 @@ const cooperationFeedbackConfig = computed(
 const homeEntriesEnabledConfig = computed(
   () => configs.value.find(item => item.key === 'mobile.home_entries_enabled') || null
 )
+const homeBrandBarConfig = computed(
+  () => configs.value.find(item => item.key === 'mobile.home_brand_bar') || null
+)
 const homeEntriesDisplayEnabled = computed(() => {
   const raw = homeEntriesEnabledConfig.value?.value.trim().toLowerCase() || ''
   return raw === 'true' || raw === '1'
@@ -185,6 +190,7 @@ const regularConfigs = computed(() =>
       item.key !== 'listing.publish_cooldown_minutes' &&
       item.key !== 'mobile.home_announcements' &&
       item.key !== 'mobile.home_banners' &&
+      item.key !== 'mobile.home_brand_bar' &&
       item.key !== 'mobile.aw_recycle' &&
       item.key !== 'mobile.cooperation_feedback' &&
       item.key !== 'mobile.home_entries_enabled' &&
@@ -368,6 +374,8 @@ function openEdit(row: SystemConfig) {
     announcementsVisible.value = true
   } else if (row.key === 'mobile.home_banners') {
     bannersVisible.value = true
+  } else if (row.key === 'mobile.home_brand_bar') {
+    brandBarVisible.value = true
   } else if (row.key === 'mobile.aw_recycle') {
     awRecycleVisible.value = true
   } else if (row.key === 'mobile.cooperation_feedback') {
@@ -749,6 +757,7 @@ function formatConfigValue(row: SystemConfig) {
       v-if="
         homeAnnouncementsConfig ||
         homeBannersConfig ||
+        homeBrandBarConfig ||
         awRecycleConfig ||
         cooperationFeedbackConfig ||
         homeEntriesEnabledConfig
@@ -760,7 +769,7 @@ function formatConfigValue(row: SystemConfig) {
           <p class="eyebrow">Home Content</p>
           <h2>首页运营配置</h2>
           <span
-            >管理首页公告、轮播图、AW炫彩回收与合作反馈入口展示图，保存后
+            >管理首页公告、轮播图、品牌条文案、AW炫彩回收与合作反馈入口展示图，保存后
             PC/移动端从接口读取。</span
           >
         </div>
@@ -771,6 +780,9 @@ function formatConfigValue(row: SystemConfig) {
           <el-button v-if="homeBannersConfig" @click="openEdit(homeBannersConfig)"
             >编辑轮播图</el-button
           >
+          <el-button v-if="homeBrandBarConfig" @click="openEdit(homeBrandBarConfig)"
+            >编辑品牌文案</el-button
+          >
           <el-button v-if="awRecycleConfig" type="primary" @click="openEdit(awRecycleConfig)"
             >编辑 AW炫彩回收</el-button
           >
@@ -824,7 +836,10 @@ function formatConfigValue(row: SystemConfig) {
           <strong>更新</strong>
           <span>{{
             formatHomeConfigStatus(
-              cooperationFeedbackConfig || awRecycleConfig || homeBannersConfig,
+              homeBrandBarConfig ||
+                cooperationFeedbackConfig ||
+                awRecycleConfig ||
+                homeBannersConfig,
               '未初始化'
             )
           }}</span>
@@ -1087,6 +1102,13 @@ function formatConfigValue(row: SystemConfig) {
       @saved="loadConfigs"
     />
 
+    <HomeBrandBarDialog
+      v-if="homeBrandBarConfig"
+      v-model="brandBarVisible"
+      :config="homeBrandBarConfig"
+      @saved="loadConfigs"
+    />
+
     <AwRecycleDialog
       v-if="awRecycleConfig"
       v-model="awRecycleVisible"

admin-web/src/features/listings/api/homeConfig.ts

@@ -203,6 +203,12 @@ export interface CooperationFeedbackConfig {
   enabled: boolean
 }
 
+export interface HomeBrandBarConfig {
+  eyebrow: string
+  title: string
+  subtitle: string
+}
+
 export interface MobileHomeConfig {
   announcements: string[]
   banners: HomeBannerSlide[]
@@ -211,6 +217,15 @@ export interface MobileHomeConfig {
   cooperation_feedback: CooperationFeedbackConfig
   /** 首页业务入口总开关：关闭后 PC/移动端同时隐藏回收与合作入口。 */
   home_entries_enabled: boolean
+  /** 首页品牌条三行文案，后台可配置；空字段回退默认文案。 */
+  brand_bar: HomeBrandBarConfig
+}
+
+/** 首页品牌条默认文案，与后端 mobile.home_brand_bar 默认值保持一致。 */
+export const defaultHomeBrandBar: HomeBrandBarConfig = {
+  eyebrow: 'JIEYOU TRADING HOUSE · 账号租赁',
+  title: '解忧柜选',
+  subtitle: '实名审核 · 流程留痕 · 账单透明 · 争议可申诉',
 }
 
 /** 总开关默认展示，保持引入总开关前的线上表现；需要隐藏时由后台开关显式关闭。 */
@@ -319,6 +334,22 @@ export function mergeHomeConfig(config?: Partial<MobileHomeConfig>): MobileHomeC
         : defaultCooperationFeedbackConfig.enabled,
   }
 
+  const brandRaw = config?.brand_bar
+  const brandBar: HomeBrandBarConfig = {
+    eyebrow:
+      typeof brandRaw?.eyebrow === 'string' && brandRaw.eyebrow.trim()
+        ? brandRaw.eyebrow.trim()
+        : defaultHomeBrandBar.eyebrow,
+    title:
+      typeof brandRaw?.title === 'string' && brandRaw.title.trim()
+        ? brandRaw.title.trim()
+        : defaultHomeBrandBar.title,
+    subtitle:
+      typeof brandRaw?.subtitle === 'string' && brandRaw.subtitle.trim()
+        ? brandRaw.subtitle.trim()
+        : defaultHomeBrandBar.subtitle,
+  }
+
   return {
     announcements: announcements.length ? announcements : defaultHomeAnnouncements,
     banners: banners.length ? banners : defaultHomeBanners,
@@ -329,6 +360,7 @@ export function mergeHomeConfig(config?: Partial<MobileHomeConfig>): MobileHomeC
       typeof config?.home_entries_enabled === 'boolean'
         ? config.home_entries_enabled
         : defaultHomeEntriesEnabled,
+    brand_bar: brandBar,
   }
 }