修改页面结构
This commit is contained in:
439
pages/mall/admin/design/config.uts
Normal file
439
pages/mall/admin/design/config.uts
Normal file
@@ -0,0 +1,439 @@
|
||||
/**
|
||||
* 设计模块页面路由配置与数据
|
||||
* 将 design.uts 的函数输出转换为页面路由/配置格式
|
||||
*/
|
||||
|
||||
import type { DesignItem, DesignComponent, DesignTemplate } from './design.uts'
|
||||
|
||||
/**
|
||||
* 装修页面列表路由配置
|
||||
*/
|
||||
export const designListPageConfig = {
|
||||
id: 'design-list',
|
||||
path: '/pages/mall/admin/design/list',
|
||||
name: '装修列表',
|
||||
title: '装修管理',
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
name: '首页装修',
|
||||
type: 'homepage' as const,
|
||||
status: 1,
|
||||
path: '/pages/mall/admin/design/index?tab=homepage',
|
||||
content: [],
|
||||
updated_at: '2026-01-30 14:30:00'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '年货节活动页',
|
||||
type: 'custom' as const,
|
||||
status: 1,
|
||||
path: '/pages/mall/admin/design/index?tab=custom',
|
||||
content: [],
|
||||
updated_at: '2026-01-28 10:15:00'
|
||||
}
|
||||
] as DesignItem[]
|
||||
}
|
||||
|
||||
/**
|
||||
* 首页装修页面路由配置
|
||||
*/
|
||||
export const designHomepagePageConfig = {
|
||||
id: 'design-homepage',
|
||||
path: '/pages/mall/admin/design/index?tab=homepage',
|
||||
name: '首页装修',
|
||||
title: '首页装修 - 打造吸引人的商城首页',
|
||||
data: {
|
||||
id: 'homepage',
|
||||
name: '首页装修',
|
||||
type: 'homepage' as const,
|
||||
status: 1,
|
||||
content: [
|
||||
{
|
||||
id: 'carousel-1',
|
||||
type: 'carousel' as const,
|
||||
name: '轮播图',
|
||||
icon: 'C',
|
||||
description: '首页顶部轮播图展示',
|
||||
config: {
|
||||
autoplay: true,
|
||||
duration: 5000,
|
||||
height: 300
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'product-1',
|
||||
type: 'product' as const,
|
||||
name: '商品展示',
|
||||
icon: 'P',
|
||||
description: '热销商品列表',
|
||||
config: {
|
||||
count: 8,
|
||||
columns: 2,
|
||||
layout: 'grid'
|
||||
}
|
||||
}
|
||||
],
|
||||
version: '1.0.0',
|
||||
updated_at: '2026-01-30 14:30:00'
|
||||
} as DesignItem
|
||||
}
|
||||
|
||||
/**
|
||||
* 分类页装修页面路由配置
|
||||
*/
|
||||
export const designCategoryPageConfig = {
|
||||
id: 'design-category',
|
||||
path: '/pages/mall/admin/design/index?tab=category',
|
||||
name: '分类页装修',
|
||||
title: '分类页装修 - 为不同分类创建独特展示',
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
name: '默认分类装修',
|
||||
type: 'category' as const,
|
||||
status: 1,
|
||||
categoryId: 0,
|
||||
categoryName: '全部分类',
|
||||
path: '/pages/mall/admin/design/index?tab=category&id=1',
|
||||
content: [],
|
||||
updated_at: '2026-01-30 14:30:00'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '热销商品分类',
|
||||
type: 'category' as const,
|
||||
status: 0,
|
||||
categoryId: 1,
|
||||
categoryName: '推荐分类',
|
||||
path: '/pages/mall/admin/design/index?tab=category&id=2',
|
||||
content: [],
|
||||
updated_at: '2026-01-29 10:15:00'
|
||||
}
|
||||
] as DesignItem[]
|
||||
}
|
||||
|
||||
/**
|
||||
* 商品页装修页面路由配置
|
||||
*/
|
||||
export const designProductPageConfig = {
|
||||
id: 'design-product',
|
||||
path: '/pages/mall/admin/design/index?tab=product',
|
||||
name: '商品页装修',
|
||||
title: '商品页装修 - 自定义商品详情页展示',
|
||||
data: {
|
||||
id: 'product',
|
||||
name: '商品页装修',
|
||||
type: 'product' as const,
|
||||
status: 1,
|
||||
content: [
|
||||
{
|
||||
id: 'image-1',
|
||||
type: 'image' as const,
|
||||
name: '商品图',
|
||||
icon: 'I',
|
||||
description: '商品主图展示'
|
||||
},
|
||||
{
|
||||
id: 'product-info',
|
||||
type: 'text' as const,
|
||||
name: '商品信息',
|
||||
icon: 'T',
|
||||
description: '商品名称和价格'
|
||||
}
|
||||
],
|
||||
version: '1.0.0',
|
||||
updated_at: '2026-01-30 14:30:00'
|
||||
} as DesignItem
|
||||
}
|
||||
|
||||
/**
|
||||
* 自定义页面路由配置
|
||||
*/
|
||||
export const designCustomPageConfig = {
|
||||
id: 'design-custom',
|
||||
path: '/pages/mall/admin/design/index?tab=custom',
|
||||
name: '自定义页面',
|
||||
title: '自定义页面 - 创建特殊内容页面',
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
name: '新年促销页',
|
||||
type: 'custom' as const,
|
||||
status: 1,
|
||||
path: '/pages/mall/admin/design/index?tab=custom&id=1',
|
||||
content: [],
|
||||
updated_at: '2026-01-28 09:00:00'
|
||||
}
|
||||
] as DesignItem[]
|
||||
}
|
||||
|
||||
/**
|
||||
* 模板库页面路由配置
|
||||
*/
|
||||
export const designTemplatePageConfig = {
|
||||
id: 'design-templates',
|
||||
path: '/pages/mall/admin/design/index?tab=templates',
|
||||
name: '模板库',
|
||||
title: '模板库 - 选择预设装修模板',
|
||||
data: [
|
||||
{
|
||||
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: []
|
||||
}
|
||||
] as DesignTemplate[]
|
||||
}
|
||||
|
||||
/**
|
||||
* 组件库页面路由配置
|
||||
*/
|
||||
export const designComponentPageConfig = {
|
||||
id: 'design-components',
|
||||
path: '/pages/mall/admin/design/index?tab=components',
|
||||
name: '组件库',
|
||||
title: '组件库 - 丰富的页面组件',
|
||||
data: [
|
||||
{
|
||||
id: 'image',
|
||||
type: 'image' as const,
|
||||
name: '图片组件',
|
||||
icon: 'I',
|
||||
description: '展示图片和图片轮播',
|
||||
componentName: 'ImageComponent',
|
||||
config: {
|
||||
defaultWidth: '100%',
|
||||
defaultHeight: 'auto'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'text',
|
||||
type: 'text' as const,
|
||||
name: '文本组件',
|
||||
icon: 'T',
|
||||
description: '展示文本内容和段落',
|
||||
componentName: 'TextComponent'
|
||||
},
|
||||
{
|
||||
id: 'product',
|
||||
type: 'product' as const,
|
||||
name: '商品组件',
|
||||
icon: 'P',
|
||||
description: '展示商品列表和推荐',
|
||||
componentName: 'ProductComponent',
|
||||
config: {
|
||||
defaultCount: 6,
|
||||
defaultColumns: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'carousel',
|
||||
type: 'carousel' as const,
|
||||
name: '轮播组件',
|
||||
icon: 'C',
|
||||
description: '图片和内容轮播',
|
||||
componentName: 'CarouselComponent',
|
||||
config: {
|
||||
autoplay: true,
|
||||
duration: 5000
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'divider',
|
||||
type: 'divider' as const,
|
||||
name: '分割线',
|
||||
icon: 'D',
|
||||
description: '分割不同内容区域',
|
||||
componentName: 'DividerComponent'
|
||||
},
|
||||
{
|
||||
id: 'spacer',
|
||||
type: 'spacer' as const,
|
||||
name: '间距组件',
|
||||
icon: 'S',
|
||||
description: '调整元素间距',
|
||||
componentName: 'SpacerComponent',
|
||||
config: {
|
||||
defaultHeight: 16
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'button',
|
||||
type: 'button' as const,
|
||||
name: '按钮组件',
|
||||
icon: 'B',
|
||||
description: '创建点击按钮',
|
||||
componentName: 'ButtonComponent'
|
||||
},
|
||||
{
|
||||
id: 'form',
|
||||
type: 'form' as const,
|
||||
name: '表单组件',
|
||||
icon: 'F',
|
||||
description: '收集用户输入数据',
|
||||
componentName: 'FormComponent'
|
||||
}
|
||||
] as DesignComponent[]
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑页面路由配置
|
||||
*/
|
||||
export const designEditorPageConfig = {
|
||||
id: 'design-editor',
|
||||
path: '/pages/mall/admin/design/editor',
|
||||
name: '装修编辑器',
|
||||
title: '装修编辑器 - 可视化编辑装修页面',
|
||||
components: [
|
||||
{
|
||||
id: 'canvas',
|
||||
name: '编辑画布',
|
||||
description: '拖拽编辑区域'
|
||||
},
|
||||
{
|
||||
id: 'sidebar',
|
||||
name: '组件侧栏',
|
||||
description: '可用组件列表'
|
||||
},
|
||||
{
|
||||
id: 'properties',
|
||||
name: '属性面板',
|
||||
description: '组件属性编辑'
|
||||
},
|
||||
{
|
||||
id: 'preview',
|
||||
name: '预览窗口',
|
||||
description: '实时效果预览'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
/**
|
||||
* 预览页面路由配置
|
||||
*/
|
||||
export const designPreviewPageConfig = {
|
||||
id: 'design-preview',
|
||||
path: '/pages/mall/design/preview/:id',
|
||||
name: '装修预览',
|
||||
title: '装修效果预览',
|
||||
features: [
|
||||
'全屏预览',
|
||||
'响应式展示',
|
||||
'交互测试',
|
||||
'性能分析'
|
||||
]
|
||||
}
|
||||
|
||||
/**
|
||||
* 所有设计页面路由配置
|
||||
*/
|
||||
export const allDesignPageConfigs = [
|
||||
designListPageConfig,
|
||||
designHomepagePageConfig,
|
||||
designCategoryPageConfig,
|
||||
designProductPageConfig,
|
||||
designCustomPageConfig,
|
||||
designTemplatePageConfig,
|
||||
designComponentPageConfig,
|
||||
designEditorPageConfig,
|
||||
designPreviewPageConfig
|
||||
]
|
||||
|
||||
/**
|
||||
* 根据 tab 获取对应的页面配置
|
||||
*/
|
||||
export function getDesignPageConfig(tab: string) {
|
||||
const configMap: Record<string, any> = {
|
||||
'homepage': designHomepagePageConfig,
|
||||
'category': designCategoryPageConfig,
|
||||
'product': designProductPageConfig,
|
||||
'custom': designCustomPageConfig,
|
||||
'templates': designTemplatePageConfig,
|
||||
'components': designComponentPageConfig,
|
||||
'editor': designEditorPageConfig,
|
||||
'preview': designPreviewPageConfig,
|
||||
'list': designListPageConfig
|
||||
}
|
||||
return configMap[tab] || designListPageConfig
|
||||
}
|
||||
|
||||
/**
|
||||
* 装修页面导航菜单结构
|
||||
*/
|
||||
export const designMenuStructure = {
|
||||
id: 'design',
|
||||
title: '设计',
|
||||
icon: '/static/design.svg',
|
||||
path: '/pages/mall/admin/design/index',
|
||||
children: [
|
||||
{
|
||||
id: 'page-decoration',
|
||||
title: '页面装修',
|
||||
children: [
|
||||
{
|
||||
id: 'design-homepage',
|
||||
title: '首页装修',
|
||||
path: '/pages/mall/admin/design/index?tab=homepage'
|
||||
},
|
||||
{
|
||||
id: 'design-category',
|
||||
title: '分类页装修',
|
||||
path: '/pages/mall/admin/design/index?tab=category'
|
||||
},
|
||||
{
|
||||
id: 'design-product',
|
||||
title: '商品页装修',
|
||||
path: '/pages/mall/admin/design/index?tab=product'
|
||||
},
|
||||
{
|
||||
id: 'design-custom',
|
||||
title: '自定义页面',
|
||||
path: '/pages/mall/admin/design/index?tab=custom'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'design-library',
|
||||
title: '设计库',
|
||||
children: [
|
||||
{
|
||||
id: 'design-templates',
|
||||
title: '模板库',
|
||||
path: '/pages/mall/admin/design/index?tab=templates'
|
||||
},
|
||||
{
|
||||
id: 'design-components',
|
||||
title: '组件库',
|
||||
path: '/pages/mall/admin/design/index?tab=components'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user