优化首页公告与轮播图

This commit is contained in:
yml
2026-05-23 01:50:45 +08:00
parent 96d87483b0
commit c9db34ddda
14 changed files with 797 additions and 91 deletions
+12
View File
@@ -48,6 +48,14 @@ func (h *Handler) Upload(c *gin.Context) {
} }
func (h *Handler) Object(c *gin.Context) { func (h *Handler) Object(c *gin.Context) {
h.writeObject(c, false)
}
func (h *Handler) PublicObject(c *gin.Context) {
h.writeObject(c, true)
}
func (h *Handler) writeObject(c *gin.Context, publicOnly bool) {
if h.storage == nil { if h.storage == nil {
response.ServiceUnavailable(c, "文件存储未连接") response.ServiceUnavailable(c, "文件存储未连接")
return return
@@ -57,6 +65,10 @@ func (h *Handler) Object(c *gin.Context) {
response.BadRequest(c, "文件 key 不正确") response.BadRequest(c, "文件 key 不正确")
return return
} }
if publicOnly && !strings.HasPrefix(key, "home-banner/") {
response.Error(c, http.StatusNotFound, "not_found", "文件不存在或暂不可访问")
return
}
object, err := h.storage.Get(c.Request.Context(), key) object, err := h.storage.Get(c.Request.Context(), key)
if err != nil { if err != nil {
response.Error(c, http.StatusNotFound, "not_found", "文件不存在或暂不可访问") response.Error(c, http.StatusNotFound, "not_found", "文件不存在或暂不可访问")
+6 -2
View File
@@ -48,9 +48,13 @@ func (s *Service) Upload(req uploadRequest) (*UploadDTO, error) {
if err != nil { if err != nil {
return nil, err return nil, err
} }
url := "/api/files/object?key=" + key
if scene == "home-banner" {
url = "/api/public/files/object?key=" + key
}
return &UploadDTO{ return &UploadDTO{
ObjectKey: key, ObjectKey: key,
URL: "/api/files/object?key=" + key, URL: url,
Filename: req.Header.Filename, Filename: req.Header.Filename,
ContentType: contentType, ContentType: contentType,
Size: req.Header.Size, Size: req.Header.Size,
@@ -60,7 +64,7 @@ func (s *Service) Upload(req uploadRequest) (*UploadDTO, error) {
func normalizeScene(scene string) string { func normalizeScene(scene string) string {
scene = strings.TrimSpace(strings.ToLower(scene)) scene = strings.TrimSpace(strings.ToLower(scene))
switch scene { switch scene {
case "listing", "handoff", "dispute", "realname", "avatar": case "listing", "handoff", "dispute", "realname", "avatar", "home-banner":
return scene return scene
default: default:
return "misc" return "misc"
@@ -17,6 +17,25 @@ type UpdateRequest struct {
Description string `json:"description"` Description string `json:"description"`
} }
type HomeAnnouncementsDTO struct {
Items []string `json:"items"`
}
type HomeConfigDTO struct {
Announcements []string `json:"announcements"`
Banners []HomeBannerItem `json:"banners"`
PublishOptions PublishOptionsDTO `json:"publish_options"`
}
type HomeBannerItem struct {
Eyebrow string `json:"eyebrow"`
Title string `json:"title"`
Badge string `json:"badge"`
Pill string `json:"pill"`
Tone string `json:"tone"`
ImageURL string `json:"image_url,omitempty"`
}
type PublishOptionsDTO struct { type PublishOptionsDTO struct {
ServerOptions []string `json:"server_options"` ServerOptions []string `json:"server_options"`
FaceOptions []string `json:"face_options"` FaceOptions []string `json:"face_options"`
@@ -36,6 +36,24 @@ func (h *Handler) PublishOptions(c *gin.Context) {
response.OK(c, options) response.OK(c, options)
} }
func (h *Handler) HomeAnnouncements(c *gin.Context) {
announcements, err := h.service.HomeAnnouncements()
if err != nil {
writeConfigError(c, err)
return
}
response.OK(c, announcements)
}
func (h *Handler) HomeConfig(c *gin.Context) {
config, err := h.service.HomeConfig()
if err != nil {
writeConfigError(c, err)
return
}
response.OK(c, config)
}
func (h *Handler) Update(c *gin.Context) { func (h *Handler) Update(c *gin.Context) {
adminID, ok := currentAdminID(c) adminID, ok := currentAdminID(c)
if !ok { if !ok {
@@ -0,0 +1,59 @@
package systemconfig
import "encoding/json"
const homeAnnouncementsConfigKey = "mobile.home_announcements"
const homeBannersConfigKey = "mobile.home_banners"
func defaultHomeAnnouncements() []string {
return []string{
"平台担保交易,拒绝私下转账/共享验证码,交接全程留痕。",
"优先推荐同地区账号,减少异地登录保护触发。",
"下单前请核对哈夫币、保险、体力负重和截图信息。",
}
}
func defaultHomeAnnouncementsConfigValue() string {
raw, err := json.Marshal(defaultHomeAnnouncements())
if err != nil {
return "[]"
}
return string(raw)
}
func defaultHomeBanners() []HomeBannerItem {
return []HomeBannerItem{
{
Eyebrow: "三角洲行动账号专区",
Title: "高哈夫币 · 安全交接 · 随租随玩",
Badge: "HOT",
Pill: "新人领券最高减 20 元",
Tone: "blue",
ImageURL: "",
},
{
Eyebrow: "平台担保交易",
Title: "交接全程留痕,拒绝私下转账",
Badge: "SAFE",
Pill: "租号前先验实名与资料",
Tone: "green",
ImageURL: "",
},
{
Eyebrow: "高效筛选",
Title: "按区服、段位、哈夫币快速找号",
Badge: "FAST",
Pill: "支持扫码号与账密号",
Tone: "orange",
ImageURL: "",
},
}
}
func defaultHomeBannersConfigValue() string {
raw, err := json.Marshal(defaultHomeBanners())
if err != nil {
return "[]"
}
return string(raw)
}
@@ -38,6 +38,8 @@ var defaultConfigs = []defaultConfig{
{Key: "settlement.platform_fee_rate", Value: "0.00", Description: "平台抽成比例"}, {Key: "settlement.platform_fee_rate", Value: "0.00", Description: "平台抽成比例"},
{Key: "settlement.owner_cycle_days", Value: "0", Description: "号主结算周期天数"}, {Key: "settlement.owner_cycle_days", Value: "0", Description: "号主结算周期天数"},
{Key: "withdraw.min_amount", Value: "100", Description: "提现最低金额预留"}, {Key: "withdraw.min_amount", Value: "100", Description: "提现最低金额预留"},
{Key: homeAnnouncementsConfigKey, Value: defaultHomeAnnouncementsConfigValue(), Description: "移动端首页公告 JSON 数组"},
{Key: homeBannersConfigKey, Value: defaultHomeBannersConfigValue(), Description: "移动端首页轮播图 JSON 数组"},
{Key: publishOptionsConfigKey, Value: defaultPublishOptionsConfigValue(), Description: "发布页选项配置 JSON"}, {Key: publishOptionsConfigKey, Value: defaultPublishOptionsConfigValue(), Description: "发布页选项配置 JSON"},
} }
@@ -3,6 +3,7 @@ package systemconfig
import ( import (
"encoding/json" "encoding/json"
"errors" "errors"
"strings"
) )
var ( var (
@@ -29,16 +30,82 @@ func (s *Service) PublishOptions() (*PublishOptionsDTO, error) {
if s.repo == nil { if s.repo == nil {
return nil, ErrDependencyUnavailable return nil, ErrDependencyUnavailable
} }
value, err := s.repo.FindValue(publishOptionsConfigKey) options, err := s.publishOptions()
if err != nil { if err != nil {
return nil, err return nil, err
} }
return &options, nil
}
func (s *Service) publishOptions() (PublishOptionsDTO, error) {
value, err := s.repo.FindValue(publishOptionsConfigKey)
if err != nil {
return PublishOptionsDTO{}, err
}
options := DefaultPublishOptions() options := DefaultPublishOptions()
if err := json.Unmarshal([]byte(value), &options); err != nil { if err := json.Unmarshal([]byte(value), &options); err != nil {
options = DefaultPublishOptions() options = DefaultPublishOptions()
} }
normalizePublishOptions(&options) normalizePublishOptions(&options)
return &options, nil return options, nil
}
func (s *Service) HomeAnnouncements() (*HomeAnnouncementsDTO, error) {
if s.repo == nil {
return nil, ErrDependencyUnavailable
}
items, err := s.homeAnnouncements()
if err != nil {
return nil, err
}
return &HomeAnnouncementsDTO{Items: items}, nil
}
func (s *Service) HomeConfig() (*HomeConfigDTO, error) {
if s.repo == nil {
return nil, ErrDependencyUnavailable
}
announcements, err := s.homeAnnouncements()
if err != nil {
return nil, err
}
banners, err := s.homeBanners()
if err != nil {
return nil, err
}
publishOptions, err := s.publishOptions()
if err != nil {
return nil, err
}
return &HomeConfigDTO{
Announcements: announcements,
Banners: banners,
PublishOptions: publishOptions,
}, nil
}
func (s *Service) homeAnnouncements() ([]string, error) {
value, err := s.repo.FindValue(homeAnnouncementsConfigKey)
if err != nil {
return nil, err
}
items := defaultHomeAnnouncements()
if err := json.Unmarshal([]byte(value), &items); err != nil {
items = defaultHomeAnnouncements()
}
return normalizeAnnouncements(items), nil
}
func (s *Service) homeBanners() ([]HomeBannerItem, error) {
value, err := s.repo.FindValue(homeBannersConfigKey)
if err != nil {
return nil, err
}
items := defaultHomeBanners()
if err := json.Unmarshal([]byte(value), &items); err != nil {
items = defaultHomeBanners()
}
return normalizeHomeBanners(items), nil
} }
func (s *Service) Update(actorID uint64, key string, req UpdateRequest, meta AuditMeta) (*ConfigDTO, error) { func (s *Service) Update(actorID uint64, key string, req UpdateRequest, meta AuditMeta) (*ConfigDTO, error) {
@@ -51,6 +118,43 @@ func (s *Service) Update(actorID uint64, key string, req UpdateRequest, meta Aud
return s.repo.Update(actorID, key, req, meta) return s.repo.Update(actorID, key, req, meta)
} }
func normalizeAnnouncements(items []string) []string {
normalized := make([]string, 0, len(items))
for _, item := range items {
item = strings.TrimSpace(item)
if item != "" {
normalized = append(normalized, item)
}
}
if len(normalized) == 0 {
return defaultHomeAnnouncements()
}
return normalized
}
func normalizeHomeBanners(items []HomeBannerItem) []HomeBannerItem {
normalized := make([]HomeBannerItem, 0, len(items))
for _, item := range items {
item.Eyebrow = strings.TrimSpace(item.Eyebrow)
item.Title = strings.TrimSpace(item.Title)
item.Badge = strings.TrimSpace(item.Badge)
item.Pill = strings.TrimSpace(item.Pill)
item.Tone = strings.TrimSpace(item.Tone)
item.ImageURL = strings.TrimSpace(item.ImageURL)
if item.Title == "" && item.ImageURL == "" {
continue
}
if item.Tone != "green" && item.Tone != "orange" {
item.Tone = "blue"
}
normalized = append(normalized, item)
}
if len(normalized) == 0 {
return defaultHomeBanners()
}
return normalized
}
func normalizePublishOptions(options *PublishOptionsDTO) { func normalizePublishOptions(options *PublishOptionsDTO) {
defaults := DefaultPublishOptions() defaults := DefaultPublishOptions()
if len(options.ServerOptions) == 0 { if len(options.ServerOptions) == 0 {
+4
View File
@@ -127,6 +127,9 @@ func New(cfg config.Config, deps Dependencies, logger *zap.Logger) *gin.Engine {
{ {
api.GET("/health", health.Check) api.GET("/health", health.Check)
api.GET("/listing-publish-options", systemConfigHandler.PublishOptions) api.GET("/listing-publish-options", systemConfigHandler.PublishOptions)
api.GET("/home-announcements", systemConfigHandler.HomeAnnouncements)
api.GET("/mobile-home-config", systemConfigHandler.HomeConfig)
api.GET("/public/files/object", fileHandler.PublicObject)
authRoutes := api.Group("/auth") authRoutes := api.Group("/auth")
{ {
@@ -208,6 +211,7 @@ func New(cfg config.Config, deps Dependencies, logger *zap.Logger) *gin.Engine {
{ {
adminRoutes.GET("/me", adminAuthHandler.Me) adminRoutes.GET("/me", adminAuthHandler.Me)
adminRoutes.POST("/auth/logout", adminAuthHandler.Logout) adminRoutes.POST("/auth/logout", adminAuthHandler.Logout)
adminRoutes.POST("/files/upload", fileHandler.Upload)
adminRoutes.GET("/dashboard", adminDashboardHandler.Summary) adminRoutes.GET("/dashboard", adminDashboardHandler.Summary)
adminRoutes.GET("/files/object", fileHandler.Object) adminRoutes.GET("/files/object", fileHandler.Object)
adminRoutes.GET("/users", adminUserHandler.List) adminRoutes.GET("/users", adminUserHandler.List)
+10
View File
@@ -24,6 +24,16 @@ export async function uploadFile(file: File, scene: string) {
return data.data 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) { export async function fetchAdminFileBlob(key: string) {
const { data } = await apiClient.get<Blob>('/admin/files/object', { const { data } = await apiClient.get<Blob>('/admin/files/object', {
params: { key }, params: { key },
+101
View File
@@ -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'
}
@@ -7,6 +7,13 @@ import {
mergeListingPublishOptions, mergeListingPublishOptions,
type ListingPublishOptions, type ListingPublishOptions,
} from '@/api/listingOptions' } 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' import { fetchSystemConfigs, updateSystemConfig, type SystemConfig } from '@/api/systemConfigs'
const loading = ref(false) const loading = ref(false)
@@ -16,10 +23,24 @@ const activeConfig = ref<SystemConfig | null>(null)
const value = ref('') const value = ref('')
const description = ref('') const description = ref('')
const publishOptionsDraft = ref<ListingPublishOptions>(cloneOptions(defaultListingPublishOptions)) 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 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 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 publishStats = computed(() => {
const options = safeParsePublishOptions(publishConfig.value?.value || '') const options = safeParsePublishOptions(publishConfig.value?.value || '')
return { return {
@@ -34,13 +55,31 @@ const publishStats = computed(() => {
regionCount: options.region_options.length, 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 isStructuredConfig = computed(() => {
const trimmed = value.value.trim() 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) onMounted(loadConfigs)
@@ -60,6 +99,12 @@ function openEdit(row: SystemConfig) {
if (row.key === 'listing.publish_options') { if (row.key === 'listing.publish_options') {
publishOptionsDraft.value = parsePublishOptions(row.value) 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() { async function handleSave() {
@@ -69,6 +114,16 @@ async function handleSave() {
if (isPublishOptionsConfig.value) { if (isPublishOptionsConfig.value) {
value.value = JSON.stringify(publishOptionsDraft.value, null, 2) 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, { await updateSystemConfig(activeConfig.value.key, {
value: value.value, value: value.value,
description: description.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) { function cloneOptions(options: ListingPublishOptions) {
return JSON.parse(JSON.stringify(options)) as 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) { function linesToItems(value: string) {
return value return value
.split('\n') .split('\n')
@@ -169,6 +248,57 @@ function resetPublishOptions() {
publishOptionsDraft.value = cloneOptions(defaultListingPublishOptions) 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) { function formatConfigValue(row: SystemConfig) {
const trimmed = row.value.trim() const trimmed = row.value.trim()
if (trimmed.startsWith('{') || trimmed.startsWith('[')) { if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
@@ -227,6 +357,42 @@ function readError(error: unknown, fallback: string) {
</div> </div>
</section> </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 v-loading="loading" class="table-panel" :data="regularConfigs">
<el-table-column prop="key" label="配置项" min-width="260" /> <el-table-column prop="key" label="配置项" min-width="260" />
<el-table-column label="当前值" min-width="180" show-overflow-tooltip> <el-table-column label="当前值" min-width="180" show-overflow-tooltip>
@@ -394,6 +560,74 @@ function readError(error: unknown, fallback: string) {
</div> </div>
</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-if="isStructuredConfig" v-model="value" type="textarea" :rows="12" placeholder="配置值 JSON" />
<el-input v-else v-model="value" placeholder="配置值" /> <el-input v-else v-model="value" placeholder="配置值" />
<el-input v-model="description" type="textarea" :rows="3" placeholder="配置说明" /> <el-input v-model="description" type="textarea" :rows="3" placeholder="配置说明" />
@@ -424,6 +658,12 @@ function readError(error: unknown, fallback: string) {
gap: 16px; gap: 16px;
} }
.panel-actions {
display: flex;
align-items: center;
gap: 8px;
}
.publish-config-main h2 { .publish-config-main h2 {
margin: 4px 0 6px; margin: 4px 0 6px;
color: #111827; color: #111827;
@@ -441,6 +681,10 @@ function readError(error: unknown, fallback: string) {
gap: 10px; gap: 10px;
} }
.home-stat-grid .publish-stat strong {
font-size: 18px;
}
.publish-stat { .publish-stat {
display: grid; display: grid;
gap: 4px; gap: 4px;
@@ -466,6 +710,60 @@ function readError(error: unknown, fallback: string) {
gap: 16px; 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-toolbar,
.editor-block-title { .editor-block-title {
display: flex; display: flex;
+87 -21
View File
@@ -5,12 +5,10 @@
padding-bottom: 58px; padding-bottom: 58px;
} }
/* ========== Hero 区域:纯色蓝色头部 ========== */ /* ========== 顶部信息区 ========== */
.mobile-hero { .mobile-hero {
overflow: hidden; padding: 14px 14px 8px;
border-radius: 0 0 24px 24px; background: #f5f7fa;
background: #1479ff;
padding: 14px 14px 18px;
} }
.mobile-topbar, .mobile-topbar,
@@ -20,22 +18,25 @@
} }
.mobile-topbar { .mobile-topbar {
gap: 10px;
justify-content: space-between; justify-content: space-between;
color: #ffffff; color: #17233d;
} }
.mobile-brand { .mobile-brand {
flex: 0 0 auto;
gap: 10px; gap: 10px;
} }
.mobile-logo { .mobile-logo {
display: grid; display: grid;
width: 38px; width: 36px;
height: 38px; height: 36px;
place-items: center; place-items: center;
border-radius: 12px; border-radius: 12px;
background: #ffffff; background: #ffffff;
color: #1479ff; color: #ff6a00;
box-shadow: 0 6px 16px rgba(23, 35, 61, 0.08);
font-weight: 900; font-weight: 900;
} }
@@ -46,34 +47,46 @@
.mobile-brand small { .mobile-brand small {
margin-top: 2px; margin-top: 2px;
color: rgba(255, 255, 255, 0.78); color: #7b8798;
font-size: 12px; font-size: 11px;
}
.mobile-brand strong {
font-size: 15px;
white-space: nowrap;
} }
.mobile-service { .mobile-service {
flex: 0 0 auto;
border: 0; border: 0;
border-radius: 999px; border-radius: 999px;
background: rgba(255, 255, 255, 0.18); background: #ffffff;
color: #ffffff; color: #1477ff;
padding: 7px 12px; padding: 7px 10px;
box-shadow: 0 6px 16px rgba(23, 35, 61, 0.08);
font-size: 13px;
font-weight: 800;
} }
/* ========== van-search 覆盖样式 ========== */ /* ========== van-search 覆盖样式 ========== */
.home-search { .home-search {
margin-top: 12px; flex: 1 1 auto;
min-width: 0;
padding: 0; padding: 0;
background: transparent; background: transparent;
} }
.home-search :deep(.van-search__content) { .home-search :deep(.van-search__content) {
border-radius: 999px; border-radius: 999px;
border: 1px solid #eef1f5;
background: #ffffff; 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) { .home-search :deep(.van-search__content .van-field__control) {
color: #17233d; color: #17233d;
font-size: 14px; font-size: 12px;
} }
/* ========== 防骗提示卡片 ========== */ /* ========== 防骗提示卡片 ========== */
@@ -83,13 +96,28 @@
gap: 8px; gap: 8px;
margin-top: 12px; margin-top: 12px;
border-radius: 12px; border-radius: 12px;
background: #ffffff; border: 1px solid #ffe6bd;
background: #fffaf0;
padding: 10px 14px; padding: 10px 14px;
font-size: 12px; font-size: 12px;
line-height: 1.45; line-height: 1.45;
color: #5c3b00; 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 { .fraud-dot {
display: inline-block; display: inline-block;
width: 6px; width: 6px;
@@ -101,7 +129,7 @@
/* ========== Content 区 ========== */ /* ========== Content 区 ========== */
.mobile-content { .mobile-content {
padding: 14px; padding: 8px 14px 14px;
} }
/* ========== Banner 轮播 ========== */ /* ========== Banner 轮播 ========== */
@@ -123,10 +151,12 @@
.banner-swipe :deep(.van-swipe__indicator--active) { .banner-swipe :deep(.van-swipe__indicator--active) {
width: 16px; width: 16px;
border-radius: 999px; border-radius: 999px;
background: #1479ff; background: #ff6a00;
} }
.mobile-banner { .mobile-banner {
position: relative;
overflow: hidden;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 14px; gap: 14px;
@@ -137,6 +167,34 @@
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); 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 { .mobile-banner.tone-green {
background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%); background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
} }
@@ -151,11 +209,17 @@
} }
.mobile-banner p { .mobile-banner p {
color: #1479ff; color: #1477ff;
font-size: 13px; font-size: 13px;
font-weight: 800; 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 { .mobile-banner h1 {
margin-top: 6px; margin-top: 6px;
font-size: 22px; font-size: 22px;
@@ -174,6 +238,8 @@
} }
.banner-badge { .banner-badge {
position: relative;
z-index: 1;
align-self: flex-start; align-self: flex-start;
border-radius: 12px; border-radius: 12px;
background: #ff6a00; background: #ff6a00;
+54 -46
View File
@@ -5,10 +5,15 @@ import { showToast } from "vant";
import { import {
defaultListingPublishOptions, defaultListingPublishOptions,
fetchListingPublishOptions,
type ListingPublishOptions, type ListingPublishOptions,
} from "@/api/listingOptions"; } from "@/api/listingOptions";
import { fetchListings, type Listing } from "@/api/listings"; import { fetchListings, type Listing } from "@/api/listings";
import {
defaultHomeAnnouncements,
defaultHomeBanners,
fetchMobileHomeConfig,
type HomeBannerSlide,
} from "@/api/homeConfig";
import MobileHomeFilterSheet, { import MobileHomeFilterSheet, {
type FilterSection, type FilterSection,
} from "./MobileHomeFilterSheet.vue"; } from "./MobileHomeFilterSheet.vue";
@@ -45,6 +50,8 @@ const selectedFilters = ref<Record<string, string[]>>({});
const rangeFilters = ref<Record<string, { min: string; max: string }>>({}); const rangeFilters = ref<Record<string, { min: string; max: string }>>({});
const refreshing = ref(false); const refreshing = ref(false);
const searchValue = ref(""); const searchValue = ref("");
const announcements = ref<string[]>(defaultHomeAnnouncements);
const bannerSlides = ref<HomeBannerSlide[]>(defaultHomeBanners);
const sortOptions = [ const sortOptions = [
{ key: "comprehensive", label: "综合排序" }, { 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 fallbackListings = computed(() => buildFallbackListings(publishOptions.value));
const sourceListings = computed(() => const sourceListings = computed(() =>
@@ -178,7 +161,7 @@ function isNavActive(path: string) {
onMounted(() => { onMounted(() => {
loadListings(); loadListings();
loadPublishOptions(); loadHomeConfig();
}); });
async function loadListings() { async function loadListings() {
@@ -193,10 +176,15 @@ async function loadListings() {
} }
} }
async function loadPublishOptions() { async function loadHomeConfig() {
try { try {
publishOptions.value = await fetchListingPublishOptions(); const config = await fetchMobileHomeConfig();
announcements.value = config.announcements;
bannerSlides.value = config.banners;
publishOptions.value = config.publish_options;
} catch { } catch {
announcements.value = defaultHomeAnnouncements;
bannerSlides.value = defaultHomeBanners;
publishOptions.value = defaultListingPublishOptions; publishOptions.value = defaultListingPublishOptions;
} }
} }
@@ -204,12 +192,14 @@ async function loadPublishOptions() {
async function onRefresh() { async function onRefresh() {
refreshing.value = true; refreshing.value = true;
try { try {
const [nextListings, nextOptions] = await Promise.all([ const [nextListings, nextHomeConfig] = await Promise.all([
fetchListings(), fetchListings(),
fetchListingPublishOptions(), fetchMobileHomeConfig(),
]); ]);
listings.value = nextListings; listings.value = nextListings;
publishOptions.value = nextOptions; announcements.value = nextHomeConfig.announcements;
bannerSlides.value = nextHomeConfig.banners;
publishOptions.value = nextHomeConfig.publish_options;
showToast({ message: "刷新成功", icon: "passed" }); showToast({ message: "刷新成功", icon: "passed" });
} catch { } catch {
// 静默处理 // 静默处理
@@ -335,7 +325,7 @@ function uniqueOptions(values: string[]) {
<template> <template>
<main class="mobile-shell"> <main class="mobile-shell">
<!-- ========== Hero 区域纯色蓝色头部 ========== --> <!-- ========== Hero 区域顶部搜索与公告 ========== -->
<section class="mobile-hero"> <section class="mobile-hero">
<div class="mobile-topbar"> <div class="mobile-topbar">
<div class="mobile-brand"> <div class="mobile-brand">
@@ -345,21 +335,30 @@ function uniqueOptions(values: string[]) {
<small>哈夫币租号</small> <small>哈夫币租号</small>
</div> </div>
</div> </div>
<van-search
v-model="searchValue"
shape="round"
placeholder="搜区服 / 段位"
class="home-search"
/>
<button class="mobile-service" type="button">客服</button> <button class="mobile-service" type="button">客服</button>
</div> </div>
<van-search
v-model="searchValue"
shape="round"
placeholder="搜区服 / 段位 / 哈夫币数量"
class="home-search"
/>
<!-- 防骗提示卡片不用 van-notice-bar --> <!-- 防骗提示卡片不用 van-notice-bar -->
<div class="fraud-tip"> <div class="fraud-tip">
<van-icon name="warning-o" :size="16" color="#b8860b" /> <van-icon name="warning-o" :size="16" color="#b8860b" />
<span class="fraud-dot"></span> <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> </div>
</section> </section>
@@ -370,15 +369,24 @@ function uniqueOptions(values: string[]) {
<van-swipe class="banner-swipe" :autoplay="3600" lazy-render> <van-swipe class="banner-swipe" :autoplay="3600" lazy-render>
<van-swipe-item <van-swipe-item
v-for="slide in bannerSlides" 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> <div>
<p>{{ slide.eyebrow }}</p> <p v-if="slide.eyebrow">{{ slide.eyebrow }}</p>
<h1>{{ slide.title }}</h1> <h1 v-if="slide.title">{{ slide.title }}</h1>
<span>{{ slide.pill }}</span> <span v-if="slide.pill">{{ slide.pill }}</span>
</div> </div>
<div class="banner-badge">{{ slide.badge }}</div> <div v-if="slide.badge" class="banner-badge">{{ slide.badge }}</div>
</div> </div>
</van-swipe-item> </van-swipe-item>
</van-swipe> </van-swipe>
+18 -17
View File
@@ -127,7 +127,7 @@ const maskedPhone = computed(() =>
<van-icon <van-icon
name="setting-o" name="setting-o"
:size="22" :size="22"
color="rgba(255,255,255,0.85)" color="#64748b"
/> />
</button> </button>
</div> </div>
@@ -247,19 +247,14 @@ const maskedPhone = computed(() =>
padding: 0 0 60px; padding: 0 0 60px;
} }
/* ========== 已登录区 - Hero蓝色横幅 ========== */ /* ========== 已登录区 - 个人信息卡 ========== */
.profile-hero { .profile-hero {
position: relative; position: relative;
padding: 28px 20px 40px; padding: 14px 12px 0;
border-radius: 0 0 24px 24px;
overflow: hidden;
} }
.hero-bg { .hero-bg {
position: absolute; display: none;
inset: 0;
background: #1479ff;
z-index: 0;
} }
.profile-hero-content { .profile-hero-content {
@@ -268,6 +263,11 @@ const maskedPhone = computed(() =>
display: flex; display: flex;
align-items: center; align-items: center;
gap: 14px; 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 { .avatar-wrap {
@@ -279,9 +279,10 @@ const maskedPhone = computed(() =>
width: 54px; width: 54px;
height: 54px; height: 54px;
place-items: center; place-items: center;
border-radius: 50%; border-radius: 16px;
background: rgba(255, 255, 255, 0.2); background: #fff3e8;
font-size: 28px; color: #ff6a00;
font-size: 26px;
} }
.hero-user { .hero-user {
@@ -294,14 +295,14 @@ const maskedPhone = computed(() =>
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
font-weight: 800; font-weight: 800;
color: #fff; color: #17233d;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.hero-user p { .hero-user p {
margin: 4px 0 0; margin: 4px 0 0;
color: rgba(255, 255, 255, 0.75); color: #7b8798;
font-size: 12px; font-size: 12px;
} }
@@ -311,15 +312,15 @@ const maskedPhone = computed(() =>
height: 36px; height: 36px;
place-items: center; place-items: center;
border: none; border: none;
background: rgba(255, 255, 255, 0.15); background: #f4f6f8;
border-radius: 50%; border-radius: 12px;
cursor: pointer; cursor: pointer;
} }
/* ========== 余额卡片 - 白色浮层 ========== */ /* ========== 余额卡片 - 白色浮层 ========== */
.balance-card { .balance-card {
position: relative; position: relative;
margin: -24px 12px 0; margin: 12px 12px 0;
padding: 18px 16px 14px; padding: 18px 16px 14px;
border-radius: 16px; border-radius: 16px;
background: #fff; background: #fff;