decorate-v2 v0.0.1

tao-template-decorate

店铺装修通用模板-淘系主题，支持PC装修、无线装修、小程序装修。

开发

项目基于 Fie fie-toolkit-next 套件搭建，Node: ~8.0.0，Tnpm: ~5.0.0, Fie: ~3.0.0。React16 + Fusion1.x，数据管理使用 rematch。PC和无线的预览依赖各自的PI loader（PC@献之、无线@辟蹊），小程序的编辑和预览依赖小程序framework @辟蹊，编辑表单使用动态加载方案@睿玄，编辑器中的预览器依赖预览器@彼洋，还会涉及到编辑的小工具部分@朔漠。更详细的内容可以在店铺装修白皮书找到。

关于主题

系统默认使用了 AStore 店铺装修的主题 @alife/dpl-aStore，如果需要替换主题需要更改 fie.config.js 和 styles/theme.scss 两个文件。因为项目中使用了一些 icon，创建新主题时可以 clone AStore 的主题以保证图标兼容，也可以直接创建新主题然后去更改代码中的图标 type。

# 本地开发
fie start

# 本地打包
# 发布时这一步不需要，但是可以本地检查打包情况
fie build

# 发布预发
fie publish -d

# 发布线上
fie publish -o

目录简介

• build: 本地打包生成文件
• data: mock数据
• demo: 本地demo
• src: 源码
  • apiConfig: api配置
  • components: 比较公用的小组件
  • config: 配置文件
    • config.js: 全局配置文件
  • pages: 页面
    • 404: 404页面
    • backupList: 备份列表页
    • decoratorTemplate: 编辑器的模板列表
    • formEditor: 编辑表单（isv使用)
    • isvDocPage: isv 文档页
    • isvDocPortal: isv 文档首页
    • isvPcDecorator: isv pc编辑器页
    • isvTemplateAudit: isv 模板审核页
    • isvTemplateManager: isv 模板管理页
    • isvWirelessDecorator: isv 无线编辑器页
    • itemCategory: 宝贝类目页
    • moduleEditor: 模块编辑器（isv使用)
    • pageList: 页面列表页
    • pcDecorator: pc编辑器页
    • pcPreview: pc预览页
    • template: 模板列表页
    • wirelessDecorator: 无线编辑器页
    • wirelessPreview: 无线预览页
  • styles: 样式
  • trans: 多语言
  • utils: 小工具

业务开发

• apiConfig下面的api配置需要遵循以下规则 - 第一个mock接口必须以/data开头 - 第一个mock接口必须与第二个真实线上接口保持一致 - 第一个mock接口必须在data目录下找到完全一致的文件

举个例子

这个配置中，'/page/getPageType'是线上真实接口路径。 '/data/page/getPageType.json'是本地mock接口路径 data/page/getPageType.json是项目中mock文件存放真实位置

getPageType: ['/data/page/getPageType.json', '/page/getPageType'],

• 如需代理日常/预发/线上请求，需要配置webpack.config.js中的preTarget变量(需要接口支持本地跨域调用)

const preTarget = 'https://pre-fliggy.design.taobao.com';

关于多语言

多语言内容统一放在trans文件夹下进行管理，在美杜莎平台管理，默认使用中文打底。并不是所有页面都提供了多语言，因为在实践的过程中发现业务场景确实不需要。如果一定需要多语言支持，建议还是使用模板中的方法，工作量也不大。