滴滴开源Tips：将你从频繁的文案修改中解救出来
桔妹导读：今天要和大家分享下最近滴滴的开源项目 Tips，就是文案管理，一个帮助你如何解决静态文案管理的方案，感兴趣的小伙伴可以去 github 一探究竟。那么接下来就要给大家来个深度剖析了，看看我们到底是怎么做的。
1.
背景
Tips是什么
Tips是一个静态文案管理平台。用于修改Web页面的静态文案，支持文案国际化，并提供提示信息的UI展示。它的目的是解决前端开发者频繁的静态文案修改问题，避免因为简单的文案修改而发起复杂的上线流程。
3.
Tips可以干什么
▍提示文案修改
有权限的用户可以看到，在页面的右下角有一个开关按钮，打开按钮页面上会出现编辑的红色按钮，点开按钮即可修改提示文案信息，提交保存后刷新页面即可看到修改后的内容。同时提示信息的容器UI展示也是平台提供。
页面内容文案的修改方式和提示信息修改一样，但是不同的是多了一个发布的操作，因为页面内容要比提示的要求更严格一些，修改后会直接影响用户的直接观感。所以这里我们对线上和线下环境做了区分，未发布前只可以在线下环境看到，去后台管理系统发布后线上即可同步。
▍文案国际化
在演示中提供了中文和英文两个版本的语言，点击按钮可以看到不同语言内容的切换。
4.
Tips是怎么做的
模块划分
由架构图可以平台划分为四个模块：
SDK：SDK作为平台和第三方平台连接的一个纽带，将管理平台和第三方平台连接在一起，以js文件的形式嵌入第三方平台，从Web-Server获取文案数据展示在第三方平台页面中，并提供可视化界面供产品和开发可直接在自己平台页面中修改文案内容；
Web-Server：Web接口层，提供文案数据的增删改查接口；
Web-UI：文案管理平台的管理界面，要接入的第三方平台的管理人员在此可将自己平台的文案管理接入我们的平台中，之后文案修改的操作可在此进行；
MongoDB：对各个接入平台的文案信息进行存储；
产出形态：该模块最终打包为js文件，嵌入在第三方接入平台系统中；
主要功能：将文案管理平台和获取文案内容，将内容显示在系统页面中，并提供UI界面供产品和开发可直接在自己系统中对文案进行修改，刷新页面后即可生效；
具体实现：
获取第三方平台传入接入时创建的系统的名称和当前登录的用户名，获取文案和数据以及对应的用户的权限；
扫描页面中的HTML标签，带有特殊属性的则根据当前系统的语言和数据的类型显示不同形态的文案：鼠标悬浮提示、气泡提示、页面文案显示；
根据用户创建的权限，判断用户是否有编辑修改权限；
对于有权限的用户显示开关，打开打开可对文案内容进行修改，保存后如果是提示信息即刻就生效，页面直接显示的文案则发布后即可生效；
主要功能：提供文案数据的增删改查接口；
模块划分：
服务管理：第三方接入平台的信息管理；
文案信息管理：第三方接入平台的页面文案管理
主要功能：提供管理端的各种可视化操作；
第三方平台信息的管理：包括新增、修改和权限管理；
文案信息的管理：包括文案信息的新增、修改，以及屏蔽功能；
Web-Server
Web-UI
5.
Tips的优点
如文章开头时讲的那个场景“简单的文案修改，直到上线发布check无误需要半个小时”，如果每天多做几次这样的事，其他的事情应该就不用做了，心里也是一万句。。。如果这件事是谁提出来就让谁直接去修改岂不更好。
所以我们最大的优点就是：
节约时间成本：省略审批发布流程，秒级修复线上错误内容；
赋能：让非技术同学（运营或者产品、法务等，以下简称非技术同学）可以通过可视界面快捷的修改页面内容，而非之前的非技术同学提供文案，然后同步技术同学之后再去修改，这样沟通成本大大增加。所以我们在降低沟通成本的同学和释放了技术同学的时间。
6.
总结
github上的demo跑起来了，欢迎评论留言，一起沟通交流。来源 | 滴滴开源
编辑 | 雨桐
Tips开源项目团队