【方案设计】主题色方案增强

[xixiIBN5100]

方案介绍

背景

根据用户的需求,微精弘需要实现主题色的高度定制化(icon,背景图等等)

这些资源如果存在本地静态文件,限定主题色的权限管理会十分棘手

同样会导致打包后的体积超过2MB,超出了小程序的打包体积上限

价值

本次改动需要进行前后端联调,主题色相关接口需要改动.计划将主题色控制和主题色配置交给后端处理

影响的模块

1. 从后端获取主题色配置,用户设置主题色逻辑,代码在src/pages/lab中
2. 储存从后端获取的主题色配置,代码在src/store/service/theme.ts中
3. 对主题色和主题icon的消费

方案设计

对比原主题的改动

• Icon 有 选中/未选中 两套资源
• 背景图不再是泡泡图
• 加入背景色

背景方案

• 首屏打开没配置时，先展示纯色背景，在后台请求定制主题配置。
• 背景图配置动态化，background-{position,image,color}
• 图床流量，http 长时间的强缓存 + 文件名 hash

Icon 方案

• 选中/未选中 icon 直接请求后端，不再经过 iconfont
• 和背景一样做兜底展示，展示普通 icon

TODO

• 设计资源到前端的流程 #132
  双方对设计资源的实用订一套规则，并遵守规则
• 敲定黑夜模式方案 #133