Skip to content

o2team/athena-component

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Athena 组件平台

集合组件上传、组件拉取、和组件预览功能。

2017-06-26:项目数据已从 Leancloud 迁移至 Quark,组件文件也改为存储在 Quark,而不再存在文件系统中(当然编译及预览文件依然会存在文件系统)


Athena之父增加了本地的单组件编译功能,所以组件平台的编译将进行最大幅度的精简,且要解决一些稳定使用之后暴露出来的问题,而且,在文哥带领下经历过一轮漫长又艰巨的Vue+Vuex+Webpack业务实践之后,更加感受到组件平台古老的代码方式该有点改变了……敬请期待

AC要用上VUEX了,马上进入电气时代


技术组成

  • 前端 vue + vuex
  • 后端 koa2 + phantomJS
  • 数据存储 Leancloud Quark (凹凸实验室出品的 BaaS 产品)

特色功能

  • 后台自动截图预览
  • 多态编译

前端页面展示

site-capture

部署指引

截图可能会出现截图里文字不见了的情况,因为——系统没有页面用到的字体,解决:

  • 在centos中执行:yum install bitmap-fonts bitmap-fonts-cjk
  • 在ubuntu中执行:sudo apt-get install xfonts-wqy
  • 安装字体 STHeiti-Light.ttcSTHeiti-Medium.ttc
git clone https://github.com/o2team/athena-component.git

cd athena-component
npm install
node install

cd app
npm install
npm run build

cd ../
npm start

前端 ./app

  • 前端配置:./src/app.js
  • 前端开发:npm run dev
  • 前端编译:npm run build

后端

  • 后端配置:./config/*
  • 后端开发:npm run dev
  • 后端部署:npm start
  • 工具
    • none

凹凸手册

  • ssh -i ~/.ssh/QCloud_O2 [email protected](chmod 600 QCloud_O2)
  • ~/wwwroot/acp.aotu.io
  • git pull
  • pm2 restart xxx

API

router.post('/api/push', upload.single('widget'), api.push)
router.get('/api/pull/:id/:rename?', api.pull)
router.get('/api/down/:id/:rename?', api.down)
router.get('/api/business/list', api.business.list)
router.get('/api/classify/list', api.classify.list)
router.get('/api/widget/query', api.widget.query)
router.get('/api/widget/count', api.widget.count)
router.get('/api/widget/detail/:id', api.widget.detail)
router.get('/api/widget/info/:id', api.widget.info)
router.get('/api/account/list', api.account.list)
router.get('/api/account/add', api.account.add)

数据初始化指引

字段如无指定,默认类型为 String

  • _Role,添加一角色 admin
  • _User,添加一用户 admin 并关联至 _Role admin
    • username
    • password
  • Business,创建(限制写入)
    • !name
  • Classify,创建(限制写入),固定数据 = 标题+标签+选项卡+坑位+商品列表+挂件+优惠券+时间轴+其他
    • !name
  • Widget,创建(无限制),限制 _Role admin: delete
    • oid 原Leancloud的id
    • stamp ms 组件更新时间戳,不等同updatedAt,用于覆盖上传组件时比对更新时间戳
    • package
    • !name
    • !author
    • business (Pointer -> Business)
    • classify (Pointer -> Classify)
    • !platform (0 = h5 | 1 = pc)
    • !pullTimes (Number default 0)
    • state (Number default 0) 状态,0=正常 1=已删除
    • appId
    • moduleId
  • Account,创建(限制写入),赋予 _Role admin: create, delete, update
    • !name

上传组件规范

(待确认)

  • 全部或部分:
    • 1个 images 文件夹 + N个图片文件
    • 1个 HTML 文件
    • 1个 CSS / SCSS 文件,如同时存在,SCSS 优先,CSS 被忽略,目前只支持预处理器 SCSS
    • 1个 Javascript 文件
    • 1个 JSON 配置文件(必需)
    • 1个 capture.png 截图文件(可选)
  • 不包含外层文件夹,无组件依赖
  • 除图片文件,所有文件名跟组件名一致
  • 组件命名务必要有一定的复杂度,避免跟CSS关键字、JS关键字、HTML标签相同,因为组件的重命名为纯粹的字符串替换
  • 配置文件 data 字段填写编译组件的必要参数
  • 配置文件 dataList 字段为多态服务,比 data 优先,必须是一个数组,数组子项就相当于一个 data

Athena 平台迭代

饿饿饿

  • 组件上传选择 业务分类
  • 组件上传分析SASS依赖,编译SASS
  • 组件下载安置SASS依赖
  • 组件重命名
  • autoprefix

其他

SyntaxHighlighter 自定义编译

gulp setup-project
gulp build --brushes=css,javascript,sass,xml --theme=default

问题归档:

Cannot assign to read only property 'exports' of object '#<Object>'

问题解决 要配对使用require和module.exports以及import和export default 所以自定义修改了 brush-base 的包