店铺页面装修流程

店铺页面装修流程（商户端/管理后台）

商户在可视化编辑器中为店铺首页或自定义页面添加与配置组件，支持多端预览，可存草稿或发布上线。

参与角色：商户/店主

flowchart TD
    Start([商户登录后台]) --> DecorateEntry[进入店铺装修]
    DecorateEntry --> SelectPage{选择装修页面}

    SelectPage -->|店铺首页| ShopHome[编辑店铺首页]
    SelectPage -->|其他自定义页面| CustomPage[编辑自定义页面]

    ShopHome --> EnterEditor[进入可视化装修编辑器]
    CustomPage --> CreateCustom{是否需要新建页面}
    CreateCustom -->|是| NewPage[新建自定义页面]
    NewPage --> SetPageName[设置页面名称]
    SetPageName --> EnterEditor
    CreateCustom -->|否| SelectExistPage[选择已有页面]
    SelectExistPage --> EnterEditor

    EnterEditor --> EditorLayout["装修编辑器布局：\n左侧：组件面板\n中间：画布区域\n右侧：属性配置区"]

    EditorLayout --> AddComponent{添加组件}
    AddComponent -->|轮播图| BannerComp["轮播图组件：\n上传图片\n设置跳转链接\n轮播间隔"]
    AddComponent -->|商品展示| ProductComp["商品组件：\n选择展示商品\n设置展示样式\n行列数配置"]
    AddComponent -->|图片广告| ImageAd["图片广告组件：\n上传广告图\n设置跳转链接"]
    AddComponent -->|文字公告| TextComp["文字公告组件：\n输入公告内容\n滚动设置"]
    AddComponent -->|优惠券| CouponComp["优惠券组件：\n选择展示优惠券"]
    AddComponent -->|分类导航| CatNavComp["分类导航组件：\n选择展示分类\n导航样式"]
    AddComponent -->|自定义区域| CustomComp["自定义组件：\n富文本编辑\n图文混排"]

    BannerComp --> ConfigComponent
    ProductComp --> ConfigComponent
    ImageAd --> ConfigComponent
    TextComp --> ConfigComponent
    CouponComp --> ConfigComponent
    CatNavComp --> ConfigComponent
    CustomComp --> ConfigComponent

    ConfigComponent[配置组件属性] --> DragSort[拖拽排序组件]
    DragSort --> EditMore{继续编辑}
    EditMore -->|添加更多组件| AddComponent
    EditMore -->|删除组件| DeleteComp[删除选中组件]
    DeleteComp --> EditMore
    EditMore -->|编辑完成| PreviewPage[预览页面效果]

    PreviewPage --> PreviewMode{预览模式}
    PreviewMode -->|PC端预览| PCPreview[PC端预览效果]
    PreviewMode -->|移动端预览| MobilePreview[移动端预览效果]

    PCPreview --> Satisfied{是否满意}
    MobilePreview --> Satisfied
    Satisfied -->|否| EnterEditor
    Satisfied -->|是| SaveDraft{保存操作}

    SaveDraft -->|保存草稿| DraftSaved[保存草稿成功]
    SaveDraft -->|发布上线| PublishPage[发布页面]
    PublishPage --> PageOnline[页面上线，前台生效]
    PageOnline --> End([装修完成])
    DraftSaved --> End2([下次继续编辑])

步骤说明

商户登录后台进入店铺装修，选择装修店铺首页或自定义页面。
自定义页面：可新建页面并命名后进入编辑器，或选择已有页面进入编辑器；店铺首页直接进入可视化装修编辑器。
在编辑器中从组件面板添加轮播图、商品展示、图片广告、文字公告、优惠券、分类导航或自定义区域等，分别配置属性；可拖拽排序、删除组件，并继续添加直至编辑完成。
预览页面效果，可选择 PC 端或移动端预览；不满意则返回编辑器继续调整。
满意后选择保存操作：保存草稿则草稿保存成功，可下次继续编辑；发布上线则页面前台生效，装修完成。流程结束。