550 lines
13 KiB
Plaintext
550 lines
13 KiB
Plaintext
/**
|
||
* 页面装修业务逻辑模块
|
||
* 参考CRMEB项目，提供完整的装修管理功能
|
||
*/
|
||
|
||
/**
|
||
* 装修页面数据接口
|
||
*/
|
||
export interface DesignItem {
|
||
id: string | number
|
||
name: string
|
||
type: 'homepage' | 'category' | 'product' | 'custom'
|
||
status: 0 | 1 // 0: 草稿, 1: 已发布
|
||
categoryId?: string | number
|
||
categoryName?: string
|
||
path?: string
|
||
preview_url?: string
|
||
content: DesignComponent[]
|
||
version?: string
|
||
created_at?: string
|
||
updated_at?: string
|
||
}
|
||
|
||
/**
|
||
* 装修组件接口
|
||
*/
|
||
export interface DesignComponent {
|
||
id: string
|
||
type: 'image' | 'text' | 'product' | 'carousel' | 'divider' | 'spacer' | 'button' | 'form'
|
||
name: string
|
||
icon: string
|
||
description?: string
|
||
componentName?: string
|
||
config?: Record<string, any>
|
||
children?: DesignComponent[]
|
||
}
|
||
|
||
/**
|
||
* 装修模板接口
|
||
*/
|
||
export interface DesignTemplate {
|
||
id: string | number
|
||
name: string
|
||
description: string
|
||
type: string
|
||
preview: string
|
||
content: DesignComponent[]
|
||
created_at?: string
|
||
}
|
||
|
||
/**
|
||
* 获取装修页面列表
|
||
* @param params 查询参数
|
||
* @returns 装修页面列表
|
||
*/
|
||
export function getDesignList(params?: Record<string, any>): Promise<DesignItem[]> {
|
||
return new Promise((resolve, reject) => {
|
||
// TODO: 实际应调用后端API
|
||
const designList: DesignItem[] = [
|
||
{
|
||
id: 1,
|
||
name: '首页装修',
|
||
type: 'homepage',
|
||
status: 1,
|
||
content: [],
|
||
updated_at: '2026-01-30 14:30:00'
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '年货节活动页',
|
||
type: 'custom',
|
||
status: 1,
|
||
content: [],
|
||
updated_at: '2026-01-28 10:15:00'
|
||
}
|
||
]
|
||
setTimeout(() => resolve(designList), 300)
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 获取首页装修详情
|
||
* @returns 首页装修数据
|
||
*/
|
||
export function getHomePageDesign(): Promise<DesignItem> {
|
||
return new Promise((resolve, reject) => {
|
||
const homepage: DesignItem = {
|
||
id: 'homepage',
|
||
name: '首页装修',
|
||
type: 'homepage',
|
||
status: 1,
|
||
content: [
|
||
{
|
||
id: 'carousel-1',
|
||
type: 'carousel',
|
||
name: '轮播图',
|
||
icon: 'C',
|
||
description: '首页顶部轮播图展示',
|
||
config: {
|
||
autoplay: true,
|
||
duration: 5000,
|
||
height: 300
|
||
}
|
||
},
|
||
{
|
||
id: 'product-1',
|
||
type: 'product',
|
||
name: '商品展示',
|
||
icon: 'P',
|
||
description: '热销商品列表',
|
||
config: {
|
||
count: 8,
|
||
columns: 2,
|
||
layout: 'grid'
|
||
}
|
||
}
|
||
],
|
||
version: '1.0.0',
|
||
updated_at: '2026-01-30 14:30:00'
|
||
}
|
||
setTimeout(() => resolve(homepage), 300)
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 获取商品页装修详情
|
||
* @returns 商品页装修数据
|
||
*/
|
||
export function getProductPageDesign(): Promise<DesignItem> {
|
||
return new Promise((resolve, reject) => {
|
||
const productPage: DesignItem = {
|
||
id: 'product',
|
||
name: '商品页装修',
|
||
type: 'product',
|
||
status: 1,
|
||
content: [
|
||
{
|
||
id: 'image-1',
|
||
type: 'image',
|
||
name: '商品图',
|
||
icon: 'I',
|
||
description: '商品主图展示'
|
||
},
|
||
{
|
||
id: 'product-info',
|
||
type: 'text',
|
||
name: '商品信息',
|
||
icon: 'T',
|
||
description: '商品名称和价格'
|
||
}
|
||
],
|
||
version: '1.0.0',
|
||
updated_at: '2026-01-30 14:30:00'
|
||
}
|
||
setTimeout(() => resolve(productPage), 300)
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 获取分类装修列表
|
||
* @returns 分类装修列表
|
||
*/
|
||
export function getCategoryDesigns(): Promise<DesignItem[]> {
|
||
return new Promise((resolve, reject) => {
|
||
const categories: DesignItem[] = [
|
||
{
|
||
id: 1,
|
||
name: '默认分类装修',
|
||
type: 'category',
|
||
status: 1,
|
||
categoryId: 0,
|
||
categoryName: '全部分类',
|
||
content: [],
|
||
updated_at: '2026-01-30 14:30:00'
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '热销商品分类',
|
||
type: 'category',
|
||
status: 0,
|
||
categoryId: 1,
|
||
categoryName: '推荐分类',
|
||
content: [],
|
||
updated_at: '2026-01-29 10:15:00'
|
||
}
|
||
]
|
||
setTimeout(() => resolve(categories), 300)
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 获取自定义页面列表
|
||
* @returns 自定义页面列表
|
||
*/
|
||
export function getCustomPages(): Promise<DesignItem[]> {
|
||
return new Promise((resolve, reject) => {
|
||
const customPages: DesignItem[] = [
|
||
{
|
||
id: 1,
|
||
name: '新年促销页',
|
||
type: 'custom',
|
||
status: 1,
|
||
path: '/pages/promotion/newyear',
|
||
content: [],
|
||
updated_at: '2026-01-28 09:00:00'
|
||
}
|
||
]
|
||
setTimeout(() => resolve(customPages), 300)
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 获取页面模板库
|
||
* @returns 模板列表
|
||
*/
|
||
export function getTemplateLibrary(): Promise<DesignTemplate[]> {
|
||
return new Promise((resolve, reject) => {
|
||
const templates: DesignTemplate[] = [
|
||
{
|
||
id: 1,
|
||
name: '电商风格A',
|
||
description: '简洁现代的电商布局',
|
||
type: 'homepage',
|
||
preview: '@/static/images/template-a.png',
|
||
content: []
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '电商风格B',
|
||
description: '豪华展示的电商布局',
|
||
type: 'homepage',
|
||
preview: '@/static/images/template-b.png',
|
||
content: []
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '精品风格',
|
||
description: '精品商品展示布局',
|
||
type: 'homepage',
|
||
preview: '@/static/images/template-c.png',
|
||
content: []
|
||
},
|
||
{
|
||
id: 4,
|
||
name: '商城风格',
|
||
description: '完整商城功能布局',
|
||
type: 'homepage',
|
||
preview: '@/static/images/template-d.png',
|
||
content: []
|
||
}
|
||
]
|
||
setTimeout(() => resolve(templates), 300)
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 获取可用组件库
|
||
* @returns 组件列表
|
||
*/
|
||
export function getAvailableComponents(): Promise<DesignComponent[]> {
|
||
return new Promise((resolve, reject) => {
|
||
const components: DesignComponent[] = [
|
||
{
|
||
id: 'image',
|
||
type: 'image',
|
||
name: '图片组件',
|
||
icon: 'I',
|
||
description: '展示图片和图片轮播',
|
||
componentName: 'ImageComponent',
|
||
config: {
|
||
defaultWidth: '100%',
|
||
defaultHeight: 'auto'
|
||
}
|
||
},
|
||
{
|
||
id: 'text',
|
||
type: 'text',
|
||
name: '文本组件',
|
||
icon: 'T',
|
||
description: '展示文本内容和段落',
|
||
componentName: 'TextComponent'
|
||
},
|
||
{
|
||
id: 'product',
|
||
type: 'product',
|
||
name: '商品组件',
|
||
icon: 'P',
|
||
description: '展示商品列表和推荐',
|
||
componentName: 'ProductComponent',
|
||
config: {
|
||
defaultCount: 6,
|
||
defaultColumns: 2
|
||
}
|
||
},
|
||
{
|
||
id: 'carousel',
|
||
type: 'carousel',
|
||
name: '轮播组件',
|
||
icon: 'C',
|
||
description: '图片和内容轮播',
|
||
componentName: 'CarouselComponent',
|
||
config: {
|
||
autoplay: true,
|
||
duration: 5000
|
||
}
|
||
},
|
||
{
|
||
id: 'divider',
|
||
type: 'divider',
|
||
name: '分割线',
|
||
icon: 'D',
|
||
description: '分割不同内容区域',
|
||
componentName: 'DividerComponent'
|
||
},
|
||
{
|
||
id: 'spacer',
|
||
type: 'spacer',
|
||
name: '间距组件',
|
||
icon: 'S',
|
||
description: '调整元素间距',
|
||
componentName: 'SpacerComponent',
|
||
config: {
|
||
defaultHeight: 16
|
||
}
|
||
},
|
||
{
|
||
id: 'button',
|
||
type: 'button',
|
||
name: '按钮组件',
|
||
icon: 'B',
|
||
description: '创建点击按钮',
|
||
componentName: 'ButtonComponent'
|
||
},
|
||
{
|
||
id: 'form',
|
||
type: 'form',
|
||
name: '表单组件',
|
||
icon: 'F',
|
||
description: '收集用户输入数据',
|
||
componentName: 'FormComponent'
|
||
}
|
||
]
|
||
setTimeout(() => resolve(components), 300)
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 保存装修页面
|
||
* @param design 装修数据
|
||
* @returns 保存结果
|
||
*/
|
||
export function saveDesign(design: DesignItem): Promise<{ id: string | number; message: string }> {
|
||
return new Promise((resolve, reject) => {
|
||
if (!design.name || design.name.trim() === '') {
|
||
reject(new Error('装修名称不能为空'))
|
||
return
|
||
}
|
||
if (!design.type) {
|
||
reject(new Error('装修类型不能为空'))
|
||
return
|
||
}
|
||
// TODO: 实际应调用后端API保存
|
||
const result = {
|
||
id: design.id || Math.random().toString(36).substr(2, 9),
|
||
message: '保存成功'
|
||
}
|
||
setTimeout(() => resolve(result), 500)
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 发布装修页面
|
||
* @param designId 装修页面ID
|
||
* @returns 发布结果
|
||
*/
|
||
export function publishDesign(designId: string | number): Promise<{ message: string }> {
|
||
return new Promise((resolve, reject) => {
|
||
if (!designId) {
|
||
reject(new Error('装修ID不能为空'))
|
||
return
|
||
}
|
||
// TODO: 实际应调用后端API发布
|
||
setTimeout(() => {
|
||
resolve({ message: '发布成功' })
|
||
}, 500)
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 删除装修页面
|
||
* @param designId 装修页面ID
|
||
* @returns 删除结果
|
||
*/
|
||
export function deleteDesign(designId: string | number): Promise<{ message: string }> {
|
||
return new Promise((resolve, reject) => {
|
||
if (!designId) {
|
||
reject(new Error('装修ID不能为空'))
|
||
return
|
||
}
|
||
// TODO: 实际应调用后端API删除
|
||
setTimeout(() => {
|
||
resolve({ message: '删除成功' })
|
||
}, 500)
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 获取装修预览URL
|
||
* @param designId 装修ID
|
||
* @returns 预览URL
|
||
*/
|
||
export function getDesignPreviewUrl(designId: string | number): string {
|
||
return `/pages/mall/design/preview/${designId}`
|
||
}
|
||
|
||
/**
|
||
* 获取装修编辑URL
|
||
* @param designId 装修ID
|
||
* @returns 编辑URL
|
||
*/
|
||
export function getDesignEditorUrl(designId: string | number): string {
|
||
return `/pages/mall/admin/design/editor?id=${designId}`
|
||
}
|
||
|
||
/**
|
||
* 格式化日期时间
|
||
* @param dateStr 日期字符串
|
||
* @returns 格式化后的日期
|
||
*/
|
||
export function formatDateTime(dateStr?: string): string {
|
||
if (!dateStr) return '--'
|
||
try {
|
||
const date = new Date(dateStr)
|
||
const year = date.getFullYear()
|
||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
const day = String(date.getDate()).padStart(2, '0')
|
||
const hours = String(date.getHours()).padStart(2, '0')
|
||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||
return `${year}-${month}-${day} ${hours}:${minutes}`
|
||
} catch {
|
||
return dateStr
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 验证组件配置
|
||
* @param component 组件配置
|
||
* @returns 验证结果
|
||
*/
|
||
export function validateComponent(component: DesignComponent): { valid: boolean; errors: string[] } {
|
||
const errors: string[] = []
|
||
|
||
if (!component.id) {
|
||
errors.push('组件ID不能为空')
|
||
}
|
||
|
||
if (!component.type) {
|
||
errors.push('组件类型不能为空')
|
||
}
|
||
|
||
if (!component.name) {
|
||
errors.push('组件名称不能为空')
|
||
}
|
||
|
||
return {
|
||
valid: errors.length === 0,
|
||
errors
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 生成组件ID
|
||
* @param type 组件类型
|
||
* @returns 生成的组件ID
|
||
*/
|
||
export function generateComponentId(type: string): string {
|
||
const timestamp = Date.now().toString(36)
|
||
const random = Math.random().toString(36).substr(2, 5)
|
||
return `${type}-${timestamp}-${random}`
|
||
}
|
||
|
||
/**
|
||
* 获取装修约束条件
|
||
* @returns 约束条件对象
|
||
*/
|
||
export function getDesignConstraints(): DesignConstraints {
|
||
return {
|
||
maxComponents: 50,
|
||
allowedComponentTypes: ['image', 'text', 'product', 'carousel', 'divider', 'spacer', 'button', 'form'],
|
||
maxImageSize: 5242880, // 5MB
|
||
supportedImageFormats: ['jpg', 'jpeg', 'png', 'gif', 'webp']
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 深度克隆装修数据
|
||
* @param design 装修数据
|
||
* @returns 克隆后的数据
|
||
*/
|
||
export function cloneDesign(design: DesignItem): DesignItem {
|
||
return JSON.parse(JSON.stringify(design))
|
||
}
|
||
|
||
/**
|
||
* 验证装修数据完整性
|
||
* @param design 装修数据
|
||
* @returns 验证结果
|
||
*/
|
||
export function validateDesign(design: DesignItem): { valid: boolean; message: string } {
|
||
if (!design.name || design.name.trim() === '') {
|
||
return { valid: false, message: '装修名称不能为空' }
|
||
}
|
||
|
||
if (!design.type) {
|
||
return { valid: false, message: '装修类型不能为空' }
|
||
}
|
||
|
||
if (!Array.isArray(design.content)) {
|
||
return { valid: false, message: '装修内容格式错误' }
|
||
}
|
||
|
||
if (design.content.length > getDesignConstraints().maxComponents) {
|
||
return { valid: false, message: `组件数量超过限制（最多${getDesignConstraints().maxComponents}个）` }
|
||
}
|
||
|
||
return { valid: true, message: '验证通过' }
|
||
}
|
||
|
||
/**
|
||
* 导出装修为JSON
|
||
* @param design 装修数据
|
||
* @returns JSON字符串
|
||
*/
|
||
export function exportDesignJSON(design: DesignItem): string {
|
||
return JSON.stringify(design, null, 2)
|
||
}
|
||
|
||
/**
|
||
* 从JSON导入装修
|
||
* @param jsonStr JSON字符串
|
||
* @returns 装修数据
|
||
*/
|
||
export function importDesignJSON(jsonStr: string): DesignItem {
|
||
try {
|
||
return JSON.parse(jsonStr) as DesignItem
|
||
} catch (error) {
|
||
throw new Error('JSON格式错误，无法导入')
|
||
}
|
||
}
|