优化首页公告与轮播图

frontend/src/api/files.ts

@@ -24,6 +24,16 @@ export async function uploadFile(file: File, scene: string) {
   return data.data
 }
 
+export async function uploadAdminFile(file: File, scene: string) {
+  const form = new FormData()
+  form.append('file', file)
+  form.append('scene', scene)
+  const { data } = await apiClient.post<ApiResponse<UploadedFile>>('/admin/files/upload', form, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  })
+  return data.data
+}
+
 export async function fetchAdminFileBlob(key: string) {
   const { data } = await apiClient.get<Blob>('/admin/files/object', {
     params: { key },

frontend/src/api/homeConfig.ts

@@ -0,0 +1,101 @@
+import { apiClient } from './client'
+import {
+  defaultListingPublishOptions,
+  mergeListingPublishOptions,
+  type ListingPublishOptions,
+} from './listingOptions'
+
+export interface HomeBannerSlide {
+  eyebrow: string
+  title: string
+  badge: string
+  pill: string
+  tone: string
+  image_url?: string
+}
+
+export interface MobileHomeConfig {
+  announcements: string[]
+  banners: HomeBannerSlide[]
+  publish_options: ListingPublishOptions
+}
+
+interface ApiResponse<T> {
+  code: string
+  message: string
+  data: T
+}
+
+export const defaultHomeAnnouncements = [
+  '平台担保交易，拒绝私下转账/共享验证码，交接全程留痕。',
+  '优先推荐同地区账号，减少异地登录保护触发。',
+  '下单前请核对哈夫币、保险、体力负重和截图信息。',
+]
+
+export const defaultHomeBanners: HomeBannerSlide[] = [
+  {
+    eyebrow: '三角洲行动账号专区',
+    title: '高哈夫币 · 安全交接 · 随租随玩',
+    badge: 'HOT',
+    pill: '新人领券最高减 20 元',
+    tone: 'blue',
+    image_url: '',
+  },
+  {
+    eyebrow: '平台担保交易',
+    title: '交接全程留痕，拒绝私下转账',
+    badge: 'SAFE',
+    pill: '租号前先验实名与资料',
+    tone: 'green',
+    image_url: '',
+  },
+  {
+    eyebrow: '高效筛选',
+    title: '按区服、段位、哈夫币快速找号',
+    badge: 'FAST',
+    pill: '支持扫码号与账密号',
+    tone: 'orange',
+    image_url: '',
+  },
+]
+
+export async function fetchMobileHomeConfig() {
+  const { data } = await apiClient.get<ApiResponse<MobileHomeConfig>>('/mobile-home-config')
+  return mergeHomeConfig(data.data)
+}
+
+export function mergeHomeConfig(config?: Partial<MobileHomeConfig>): MobileHomeConfig {
+  const announcements =
+    config?.announcements
+      ?.map((item) => (typeof item === 'string' ? item.trim() : ''))
+      .filter(Boolean) || []
+  const banners =
+    config?.banners
+      ?.map((item) => {
+        const banner = isBannerLike(item) ? item : ({} as Partial<HomeBannerSlide>)
+        return {
+          eyebrow: banner.eyebrow?.trim() || '',
+          title: banner.title?.trim() || '',
+          badge: banner.badge?.trim() || '',
+          pill: banner.pill?.trim() || '',
+          tone: normalizeBannerTone(banner.tone),
+          image_url: banner.image_url?.trim() || '',
+        }
+      })
+      .filter((item) => item.title || item.image_url) || []
+
+  return {
+    announcements: announcements.length ? announcements : defaultHomeAnnouncements,
+    banners: banners.length ? banners : defaultHomeBanners,
+    publish_options: mergeListingPublishOptions(config?.publish_options || defaultListingPublishOptions),
+  }
+}
+
+function isBannerLike(value: unknown): value is Partial<HomeBannerSlide> {
+  return typeof value === 'object' && value !== null
+}
+
+function normalizeBannerTone(tone?: string) {
+  if (tone === 'green' || tone === 'orange') return tone
+  return 'blue'
+}

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;

frontend/src/views/mobile/MobileHomeView.css

@@ -5,12 +5,10 @@
   padding-bottom: 58px;
 }
 
-/* ========== Hero 区域：纯色蓝色头部 ========== */
+/* ========== 顶部信息区 ========== */
 .mobile-hero {
-  overflow: hidden;
-  border-radius: 0 0 24px 24px;
-  background: #1479ff;
-  padding: 14px 14px 18px;
+  padding: 14px 14px 8px;
+  background: #f5f7fa;
 }
 
 .mobile-topbar,
@@ -20,22 +18,25 @@
 }
 
 .mobile-topbar {
+  gap: 10px;
   justify-content: space-between;
-  color: #ffffff;
+  color: #17233d;
 }
 
 .mobile-brand {
+  flex: 0 0 auto;
   gap: 10px;
 }
 
 .mobile-logo {
   display: grid;
-  width: 38px;
-  height: 38px;
+  width: 36px;
+  height: 36px;
   place-items: center;
   border-radius: 12px;
   background: #ffffff;
-  color: #1479ff;
+  color: #ff6a00;
+  box-shadow: 0 6px 16px rgba(23, 35, 61, 0.08);
   font-weight: 900;
 }
 
@@ -46,34 +47,46 @@
 
 .mobile-brand small {
   margin-top: 2px;
-  color: rgba(255, 255, 255, 0.78);
-  font-size: 12px;
+  color: #7b8798;
+  font-size: 11px;
+}
+
+.mobile-brand strong {
+  font-size: 15px;
+  white-space: nowrap;
 }
 
 .mobile-service {
+  flex: 0 0 auto;
   border: 0;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.18);
-  color: #ffffff;
-  padding: 7px 12px;
+  background: #ffffff;
+  color: #1477ff;
+  padding: 7px 10px;
+  box-shadow: 0 6px 16px rgba(23, 35, 61, 0.08);
+  font-size: 13px;
+  font-weight: 800;
 }
 
 /* ========== van-search 覆盖样式 ========== */
 .home-search {
-  margin-top: 12px;
+  flex: 1 1 auto;
+  min-width: 0;
   padding: 0;
   background: transparent;
 }
 
 .home-search :deep(.van-search__content) {
   border-radius: 999px;
+  border: 1px solid #eef1f5;
   background: #ffffff;
-  padding: 8px 14px;
+  padding: 6px 10px;
+  box-shadow: 0 8px 20px rgba(23, 35, 61, 0.06);
 }
 
 .home-search :deep(.van-search__content .van-field__control) {
   color: #17233d;
-  font-size: 14px;
+  font-size: 12px;
 }
 
 /* ========== 防骗提示卡片 ========== */
@@ -83,13 +96,28 @@
   gap: 8px;
   margin-top: 12px;
   border-radius: 12px;
-  background: #ffffff;
+  border: 1px solid #ffe6bd;
+  background: #fffaf0;
   padding: 10px 14px;
   font-size: 12px;
   line-height: 1.45;
   color: #5c3b00;
 }
 
+.announcement-swipe {
+  flex: 1;
+  height: 18px;
+  min-width: 0;
+}
+
+.announcement-swipe span {
+  display: block;
+  overflow: hidden;
+  color: #5c3b00;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .fraud-dot {
   display: inline-block;
   width: 6px;
@@ -101,7 +129,7 @@
 
 /* ========== Content 区 ========== */
 .mobile-content {
-  padding: 14px;
+  padding: 8px 14px 14px;
 }
 
 /* ========== Banner 轮播 ========== */
@@ -123,10 +151,12 @@
 .banner-swipe :deep(.van-swipe__indicator--active) {
   width: 16px;
   border-radius: 999px;
-  background: #1479ff;
+  background: #ff6a00;
 }
 
 .mobile-banner {
+  position: relative;
+  overflow: hidden;
   display: flex;
   justify-content: space-between;
   gap: 14px;
@@ -137,6 +167,34 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
 }
 
+.mobile-banner.has-image {
+  min-height: 132px;
+  align-items: flex-end;
+  background: #17233d;
+  color: #ffffff;
+}
+
+.banner-image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.mobile-banner.has-image::after {
+  position: absolute;
+  inset: 0;
+  content: "";
+  background: linear-gradient(90deg, rgba(10, 18, 32, 0.64), rgba(10, 18, 32, 0.12));
+}
+
+.mobile-banner.has-image > div:not(.banner-badge) {
+  position: relative;
+  z-index: 1;
+  max-width: 78%;
+}
+
 .mobile-banner.tone-green {
   background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
 }
@@ -151,11 +209,17 @@
 }
 
 .mobile-banner p {
-  color: #1479ff;
+  color: #1477ff;
   font-size: 13px;
   font-weight: 800;
 }
 
+.mobile-banner.has-image p,
+.mobile-banner.has-image h1 {
+  color: #ffffff;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
+}
+
 .mobile-banner h1 {
   margin-top: 6px;
   font-size: 22px;
@@ -174,6 +238,8 @@
 }
 
 .banner-badge {
+  position: relative;
+  z-index: 1;
   align-self: flex-start;
   border-radius: 12px;
   background: #ff6a00;

frontend/src/views/mobile/MobileHomeView.vue

@@ -5,10 +5,15 @@ import { showToast } from "vant";
 
 import {
   defaultListingPublishOptions,
-  fetchListingPublishOptions,
   type ListingPublishOptions,
 } from "@/api/listingOptions";
 import { fetchListings, type Listing } from "@/api/listings";
+import {
+  defaultHomeAnnouncements,
+  defaultHomeBanners,
+  fetchMobileHomeConfig,
+  type HomeBannerSlide,
+} from "@/api/homeConfig";
 import MobileHomeFilterSheet, {
   type FilterSection,
 } from "./MobileHomeFilterSheet.vue";
@@ -45,6 +50,8 @@ const selectedFilters = ref<Record<string, string[]>>({});
 const rangeFilters = ref<Record<string, { min: string; max: string }>>({});
 const refreshing = ref(false);
 const searchValue = ref("");
+const announcements = ref<string[]>(defaultHomeAnnouncements);
+const bannerSlides = ref<HomeBannerSlide[]>(defaultHomeBanners);
 
 const sortOptions = [
   { key: "comprehensive", label: "综合排序" },
@@ -70,30 +77,6 @@ const rangePresets: Record<string, Array<{ label: string; min: string; max: stri
   ],
 };
 
-const bannerSlides = [
-  {
-    eyebrow: "三角洲行动账号专区",
-    title: "高哈夫币 · 安全交接 · 随租随玩",
-    badge: "HOT",
-    pill: "新人领券最高减 20 元",
-    tone: "blue",
-  },
-  {
-    eyebrow: "平台担保交易",
-    title: "交接全程留痕，拒绝私下转账",
-    badge: "SAFE",
-    pill: "租号前先验实名与资料",
-    tone: "green",
-  },
-  {
-    eyebrow: "高效筛选",
-    title: "按区服、段位、哈夫币快速找号",
-    badge: "FAST",
-    pill: "支持扫码号与账密号",
-    tone: "orange",
-  },
-];
-
 const fallbackListings = computed(() => buildFallbackListings(publishOptions.value));
 
 const sourceListings = computed(() =>
@@ -178,7 +161,7 @@ function isNavActive(path: string) {
 
 onMounted(() => {
   loadListings();
-  loadPublishOptions();
+  loadHomeConfig();
 });
 
 async function loadListings() {
@@ -193,10 +176,15 @@ async function loadListings() {
   }
 }
 
-async function loadPublishOptions() {
+async function loadHomeConfig() {
   try {
-    publishOptions.value = await fetchListingPublishOptions();
+    const config = await fetchMobileHomeConfig();
+    announcements.value = config.announcements;
+    bannerSlides.value = config.banners;
+    publishOptions.value = config.publish_options;
   } catch {
+    announcements.value = defaultHomeAnnouncements;
+    bannerSlides.value = defaultHomeBanners;
     publishOptions.value = defaultListingPublishOptions;
   }
 }
@@ -204,12 +192,14 @@ async function loadPublishOptions() {
 async function onRefresh() {
   refreshing.value = true;
   try {
-    const [nextListings, nextOptions] = await Promise.all([
+    const [nextListings, nextHomeConfig] = await Promise.all([
       fetchListings(),
-      fetchListingPublishOptions(),
+      fetchMobileHomeConfig(),
     ]);
     listings.value = nextListings;
-    publishOptions.value = nextOptions;
+    announcements.value = nextHomeConfig.announcements;
+    bannerSlides.value = nextHomeConfig.banners;
+    publishOptions.value = nextHomeConfig.publish_options;
     showToast({ message: "刷新成功", icon: "passed" });
   } catch {
     // 静默处理
@@ -335,7 +325,7 @@ function uniqueOptions(values: string[]) {
 
 <template>
   <main class="mobile-shell">
-    <!-- ========== Hero 区域：纯色蓝色头部 ========== -->
+    <!-- ========== Hero 区域：顶部搜索与公告 ========== -->
     <section class="mobile-hero">
       <div class="mobile-topbar">
         <div class="mobile-brand">
@@ -345,21 +335,30 @@ function uniqueOptions(values: string[]) {
             <small>哈夫币租号</small>
           </div>
         </div>
+        <van-search
+          v-model="searchValue"
+          shape="round"
+          placeholder="搜区服 / 段位"
+          class="home-search"
+        />
         <button class="mobile-service" type="button">客服</button>
       </div>
 
-      <van-search
-        v-model="searchValue"
-        shape="round"
-        placeholder="搜区服 / 段位 / 哈夫币数量"
-        class="home-search"
-      />
-
       <!-- 防骗提示卡片（不用 van-notice-bar） -->
       <div class="fraud-tip">
         <van-icon name="warning-o" :size="16" color="#b8860b" />
         <span class="fraud-dot"></span>
-        <span>平台担保交易，拒绝私下转账/共享验证码，交接全程留痕。</span>
+        <van-swipe
+          class="announcement-swipe"
+          vertical
+          :autoplay="3200"
+          :show-indicators="false"
+          touchable
+        >
+          <van-swipe-item v-for="item in announcements" :key="item">
+            <span>{{ item }}</span>
+          </van-swipe-item>
+        </van-swipe>
       </div>
     </section>
 
@@ -370,15 +369,24 @@ function uniqueOptions(values: string[]) {
         <van-swipe class="banner-swipe" :autoplay="3600" lazy-render>
           <van-swipe-item
             v-for="slide in bannerSlides"
-            :key="slide.title"
+            :key="slide.title || slide.image_url"
           >
-            <div class="mobile-banner" :class="`tone-${slide.tone}`">
+            <div
+              class="mobile-banner"
+              :class="[`tone-${slide.tone}`, { 'has-image': slide.image_url }]"
+            >
+              <img
+                v-if="slide.image_url"
+                class="banner-image"
+                :src="slide.image_url"
+                :alt="slide.title || slide.eyebrow || '首页轮播图'"
+              />
               <div>
-                <p>{{ slide.eyebrow }}</p>
-                <h1>{{ slide.title }}</h1>
-                <span>{{ slide.pill }}</span>
+                <p v-if="slide.eyebrow">{{ slide.eyebrow }}</p>
+                <h1 v-if="slide.title">{{ slide.title }}</h1>
+                <span v-if="slide.pill">{{ slide.pill }}</span>
               </div>
-              <div class="banner-badge">{{ slide.badge }}</div>
+              <div v-if="slide.badge" class="banner-badge">{{ slide.badge }}</div>
             </div>
           </van-swipe-item>
         </van-swipe>

frontend/src/views/mobile/MobileProfileView.vue

@@ -127,7 +127,7 @@ const maskedPhone = computed(() =>
             <van-icon
               name="setting-o"
               :size="22"
-              color="rgba(255,255,255,0.85)"
+              color="#64748b"
             />
           </button>
         </div>
@@ -247,19 +247,14 @@ const maskedPhone = computed(() =>
   padding: 0 0 60px;
 }
 
-/* ========== 已登录区 - Hero蓝色横幅 ========== */
+/* ========== 已登录区 - 个人信息卡 ========== */
 .profile-hero {
   position: relative;
-  padding: 28px 20px 40px;
-  border-radius: 0 0 24px 24px;
-  overflow: hidden;
+  padding: 14px 12px 0;
 }
 
 .hero-bg {
-  position: absolute;
-  inset: 0;
-  background: #1479ff;
-  z-index: 0;
+  display: none;
 }
 
 .profile-hero-content {
@@ -268,6 +263,11 @@ const maskedPhone = computed(() =>
   display: flex;
   align-items: center;
   gap: 14px;
+  border: 1px solid #eef1f5;
+  border-radius: 18px;
+  background: #fff;
+  padding: 16px;
+  box-shadow: 0 8px 24px rgba(23, 35, 61, 0.06);
 }
 
 .avatar-wrap {
@@ -279,9 +279,10 @@ const maskedPhone = computed(() =>
   width: 54px;
   height: 54px;
   place-items: center;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.2);
-  font-size: 28px;
+  border-radius: 16px;
+  background: #fff3e8;
+  color: #ff6a00;
+  font-size: 26px;
 }
 
 .hero-user {
@@ -294,14 +295,14 @@ const maskedPhone = computed(() =>
   margin: 0;
   font-size: 18px;
   font-weight: 800;
-  color: #fff;
+  color: #17233d;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .hero-user p {
   margin: 4px 0 0;
-  color: rgba(255, 255, 255, 0.75);
+  color: #7b8798;
   font-size: 12px;
 }
 
@@ -311,15 +312,15 @@ const maskedPhone = computed(() =>
   height: 36px;
   place-items: center;
   border: none;
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: 50%;
+  background: #f4f6f8;
+  border-radius: 12px;
   cursor: pointer;
 }
 
 /* ========== 余额卡片 - 白色浮层 ========== */
 .balance-card {
   position: relative;
-  margin: -24px 12px 0;
+  margin: 12px 12px 0;
   padding: 18px 16px 14px;
   border-radius: 16px;
   background: #fff;