优化首页公告与轮播图

frontend/src/views/admin/AdminSystemConfigsView.vue

@@ -7,6 +7,13 @@ import {
   mergeListingPublishOptions,
   type ListingPublishOptions,
 } from '@/api/listingOptions'
+import {
+  defaultHomeAnnouncements,
+  defaultHomeBanners,
+  mergeHomeConfig,
+  type HomeBannerSlide,
+} from '@/api/homeConfig'
+import { uploadAdminFile } from '@/api/files'
 import { fetchSystemConfigs, updateSystemConfig, type SystemConfig } from '@/api/systemConfigs'
 
 const loading = ref(false)
@@ -16,10 +23,24 @@ const activeConfig = ref<SystemConfig | null>(null)
 const value = ref('')
 const description = ref('')
 const publishOptionsDraft = ref<ListingPublishOptions>(cloneOptions(defaultListingPublishOptions))
+const homeAnnouncementLines = ref(itemsToLines(defaultHomeAnnouncements))
+const homeBannersDraft = ref<HomeBannerSlide[]>(cloneHomeBanners(defaultHomeBanners))
+const uploadingBannerIndex = ref<number | null>(null)
 
 const publishConfig = computed(() => configs.value.find((item) => item.key === 'listing.publish_options') || null)
-const regularConfigs = computed(() => configs.value.filter((item) => item.key !== 'listing.publish_options'))
+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 regularConfigs = computed(() =>
+  configs.value.filter(
+    (item) =>
+      item.key !== 'listing.publish_options' &&
+      item.key !== 'mobile.home_announcements' &&
+      item.key !== 'mobile.home_banners',
+  ),
+)
 const isPublishOptionsConfig = computed(() => activeConfig.value?.key === 'listing.publish_options')
+const isHomeAnnouncementsConfig = computed(() => activeConfig.value?.key === 'mobile.home_announcements')
+const isHomeBannersConfig = computed(() => activeConfig.value?.key === 'mobile.home_banners')
 const publishStats = computed(() => {
   const options = safeParsePublishOptions(publishConfig.value?.value || '')
   return {
@@ -34,13 +55,31 @@ const publishStats = computed(() => {
     regionCount: options.region_options.length,
   }
 })
+const homeStats = computed(() => {
+  const announcements = parseHomeAnnouncements(homeAnnouncementsConfig.value?.value || '', false)
+  const banners = parseHomeBanners(homeBannersConfig.value?.value || '', false)
+  return {
+    announcementCount: announcements.length,
+    bannerCount: banners.length,
+  }
+})
 
 const isStructuredConfig = computed(() => {
   const trimmed = value.value.trim()
-  return isPublishOptionsConfig.value || trimmed.startsWith('{') || trimmed.startsWith('[')
+  return (
+    isPublishOptionsConfig.value ||
+    isHomeAnnouncementsConfig.value ||
+    isHomeBannersConfig.value ||
+    trimmed.startsWith('{') ||
+    trimmed.startsWith('[')
+  )
 })
 
-const dialogWidth = computed(() => (isPublishOptionsConfig.value ? '920px' : '560px'))
+const dialogWidth = computed(() => {
+  if (isPublishOptionsConfig.value || isHomeBannersConfig.value) return '920px'
+  if (isHomeAnnouncementsConfig.value) return '680px'
+  return '560px'
+})
 
 onMounted(loadConfigs)
 
@@ -60,6 +99,12 @@ function openEdit(row: SystemConfig) {
   if (row.key === 'listing.publish_options') {
     publishOptionsDraft.value = parsePublishOptions(row.value)
   }
+  if (row.key === 'mobile.home_announcements') {
+    homeAnnouncementLines.value = itemsToLines(parseHomeAnnouncements(row.value, true))
+  }
+  if (row.key === 'mobile.home_banners') {
+    homeBannersDraft.value = parseHomeBanners(row.value, true)
+  }
 }
 
 async function handleSave() {
@@ -69,6 +114,16 @@ async function handleSave() {
     if (isPublishOptionsConfig.value) {
       value.value = JSON.stringify(publishOptionsDraft.value, null, 2)
     }
+    if (isHomeAnnouncementsConfig.value) {
+      value.value = JSON.stringify(linesToItems(homeAnnouncementLines.value), null, 2)
+    }
+    if (isHomeBannersConfig.value) {
+      value.value = JSON.stringify(
+        homeBannersDraft.value.filter((item) => item.title.trim() || item.image_url?.trim()),
+        null,
+        2,
+      )
+    }
     await updateSystemConfig(activeConfig.value.key, {
       value: value.value,
       description: description.value,
@@ -102,10 +157,34 @@ function safeParsePublishOptions(raw: string) {
   }
 }
 
+function parseHomeAnnouncements(raw: string, showWarning = false) {
+  try {
+    const parsed = raw.trim() ? JSON.parse(raw) : defaultHomeAnnouncements
+    return mergeHomeConfig({ announcements: Array.isArray(parsed) ? parsed : [] }).announcements
+  } catch {
+    if (showWarning) ElMessage.warning('首页公告 JSON 解析失败，已使用默认配置')
+    return [...defaultHomeAnnouncements]
+  }
+}
+
+function parseHomeBanners(raw: string, showWarning = false) {
+  try {
+    const parsed = raw.trim() ? JSON.parse(raw) : defaultHomeBanners
+    return cloneHomeBanners(mergeHomeConfig({ banners: Array.isArray(parsed) ? parsed : [] }).banners)
+  } catch {
+    if (showWarning) ElMessage.warning('首页轮播 JSON 解析失败，已使用默认配置')
+    return cloneHomeBanners(defaultHomeBanners)
+  }
+}
+
 function cloneOptions(options: ListingPublishOptions) {
   return JSON.parse(JSON.stringify(options)) as ListingPublishOptions
 }
 
+function cloneHomeBanners(banners: HomeBannerSlide[]) {
+  return JSON.parse(JSON.stringify(banners)) as HomeBannerSlide[]
+}
+
 function linesToItems(value: string) {
   return value
     .split('\n')
@@ -169,6 +248,57 @@ function resetPublishOptions() {
   publishOptionsDraft.value = cloneOptions(defaultListingPublishOptions)
 }
 
+function addHomeBanner() {
+  homeBannersDraft.value.push({
+    eyebrow: '首页推荐',
+    title: '',
+    badge: 'NEW',
+    pill: '',
+    tone: 'blue',
+    image_url: '',
+  })
+}
+
+function removeHomeBanner(index: number) {
+  homeBannersDraft.value.splice(index, 1)
+}
+
+function resetHomeAnnouncements() {
+  homeAnnouncementLines.value = itemsToLines(defaultHomeAnnouncements)
+}
+
+function resetHomeBanners() {
+  homeBannersDraft.value = cloneHomeBanners(defaultHomeBanners)
+}
+
+async function handleHomeBannerUpload(event: Event, index: number) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  input.value = ''
+  if (!file) return
+  uploadingBannerIndex.value = index
+  try {
+    const uploaded = await uploadAdminFile(file, 'home-banner')
+    const banner = homeBannersDraft.value[index]
+    if (banner) {
+      banner.image_url = uploaded.url
+      if (!banner.title) {
+        banner.title = banner.eyebrow || '首页轮播图'
+      }
+    }
+    ElMessage.success('图片已上传')
+  } catch (error) {
+    ElMessage.error(readError(error, '图片上传失败'))
+  } finally {
+    uploadingBannerIndex.value = null
+  }
+}
+
+function formatHomeConfigStatus(row: SystemConfig | null, fallback: string) {
+  if (!row) return fallback
+  return row.updated_at || fallback
+}
+
 function formatConfigValue(row: SystemConfig) {
   const trimmed = row.value.trim()
   if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
@@ -227,6 +357,42 @@ function readError(error: unknown, fallback: string) {
       </div>
     </section>
 
+    <section v-if="homeAnnouncementsConfig || homeBannersConfig" class="publish-config-panel">
+      <div class="publish-config-main">
+        <div>
+          <p class="eyebrow">Home Content</p>
+          <h2>移动端首页运营配置</h2>
+          <span>管理首页公告滚动内容和顶部轮播图，保存后移动端会从接口读取最新配置。</span>
+        </div>
+        <div class="panel-actions">
+          <el-button v-if="homeAnnouncementsConfig" @click="openEdit(homeAnnouncementsConfig)">编辑公告</el-button>
+          <el-button v-if="homeBannersConfig" type="primary" @click="openEdit(homeBannersConfig)">编辑轮播图</el-button>
+        </div>
+      </div>
+      <div class="publish-stat-grid home-stat-grid">
+        <div class="publish-stat">
+          <strong>{{ homeStats.announcementCount }}</strong>
+          <span>公告条数</span>
+        </div>
+        <div class="publish-stat">
+          <strong>{{ homeStats.bannerCount }}</strong>
+          <span>轮播图</span>
+        </div>
+        <div class="publish-stat">
+          <strong>接口</strong>
+          <span>/api/mobile-home-config</span>
+        </div>
+        <div class="publish-stat">
+          <strong>公告</strong>
+          <span>{{ formatHomeConfigStatus(homeAnnouncementsConfig, '未初始化') }}</span>
+        </div>
+        <div class="publish-stat">
+          <strong>轮播</strong>
+          <span>{{ formatHomeConfigStatus(homeBannersConfig, '未初始化') }}</span>
+        </div>
+      </div>
+    </section>
+
     <el-table v-loading="loading" class="table-panel" :data="regularConfigs">
       <el-table-column prop="key" label="配置项" min-width="260" />
       <el-table-column label="当前值" min-width="180" show-overflow-tooltip>
@@ -394,6 +560,74 @@ function readError(error: unknown, fallback: string) {
           </div>
         </div>
 
+        <div v-else-if="isHomeAnnouncementsConfig" class="home-config-editor">
+          <div class="editor-toolbar">
+            <span>首页公告</span>
+            <el-button size="small" @click="resetHomeAnnouncements">恢复默认公告</el-button>
+          </div>
+          <el-form-item label="公告内容">
+            <el-input
+              v-model="homeAnnouncementLines"
+              type="textarea"
+              :rows="8"
+              placeholder="一行一条公告，移动端会自动轮播展示"
+            />
+          </el-form-item>
+        </div>
+
+        <div v-else-if="isHomeBannersConfig" class="home-config-editor">
+          <div class="editor-toolbar">
+            <span>首页轮播图</span>
+            <div class="panel-actions">
+              <el-button size="small" @click="resetHomeBanners">恢复默认轮播</el-button>
+              <el-button size="small" type="primary" @click="addHomeBanner">添加轮播</el-button>
+            </div>
+          </div>
+          <el-table :data="homeBannersDraft" size="small" border>
+            <el-table-column label="图片" min-width="240">
+              <template #default="{ row, $index }">
+                <div class="banner-image-editor">
+                  <el-input v-model="row.image_url" placeholder="图片 URL，留空使用文字卡片" />
+                  <div class="banner-image-tools">
+                    <img v-if="row.image_url" :src="row.image_url" alt="轮播图预览" />
+                    <span v-else>无图</span>
+                    <label class="upload-trigger">
+                      <input type="file" accept="image/jpeg,image/png,image/webp" @change="handleHomeBannerUpload($event, $index)" />
+                      {{ uploadingBannerIndex === $index ? '上传中' : '上传图片' }}
+                    </label>
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="眉标" min-width="160">
+              <template #default="{ row }"><el-input v-model="row.eyebrow" placeholder="如 三角洲行动账号专区" /></template>
+            </el-table-column>
+            <el-table-column label="主标题" min-width="220">
+              <template #default="{ row }"><el-input v-model="row.title" placeholder="轮播主文案" /></template>
+            </el-table-column>
+            <el-table-column label="角标" width="110">
+              <template #default="{ row }"><el-input v-model="row.badge" placeholder="HOT" /></template>
+            </el-table-column>
+            <el-table-column label="胶囊文案" min-width="220">
+              <template #default="{ row }"><el-input v-model="row.pill" placeholder="底部补充文案" /></template>
+            </el-table-column>
+            <el-table-column label="色调" width="130">
+              <template #default="{ row }">
+                <el-select v-model="row.tone" placeholder="色调">
+                  <el-option label="蓝色" value="blue" />
+                  <el-option label="绿色" value="green" />
+                  <el-option label="橙色" value="orange" />
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="90">
+              <template #default="{ $index }">
+                <el-button size="small" type="danger" plain @click="removeHomeBanner($index)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
         <el-input v-else-if="isStructuredConfig" v-model="value" type="textarea" :rows="12" placeholder="配置值 JSON" />
         <el-input v-else v-model="value" placeholder="配置值" />
         <el-input v-model="description" type="textarea" :rows="3" placeholder="配置说明" />
@@ -424,6 +658,12 @@ function readError(error: unknown, fallback: string) {
   gap: 16px;
 }
 
+.panel-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .publish-config-main h2 {
   margin: 4px 0 6px;
   color: #111827;
@@ -441,6 +681,10 @@ function readError(error: unknown, fallback: string) {
   gap: 10px;
 }
 
+.home-stat-grid .publish-stat strong {
+  font-size: 18px;
+}
+
 .publish-stat {
   display: grid;
   gap: 4px;
@@ -466,6 +710,60 @@ function readError(error: unknown, fallback: string) {
   gap: 16px;
 }
 
+.home-config-editor {
+  display: grid;
+  gap: 14px;
+}
+
+.banner-image-editor {
+  display: grid;
+  gap: 8px;
+}
+
+.banner-image-tools {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.banner-image-tools img,
+.banner-image-tools span {
+  width: 68px;
+  height: 38px;
+  border-radius: 6px;
+  background: #f3f4f6;
+  object-fit: cover;
+}
+
+.banner-image-tools span {
+  display: grid;
+  place-items: center;
+  color: #9ca3af;
+  font-size: 12px;
+}
+
+.upload-trigger {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: #fff;
+  color: #606266;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.upload-trigger input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
 .editor-toolbar,
 .editor-block-title {
   display: flex;