# E-commerce Components

![coverage](http://gitlab.ztesoft.com/fish-x/fish-desktop-x/badges/develop/coverage.svg?job=test&style=flat-square)
![Build Status](http://gitlab.ztesoft.com/fish-x/fish-desktop-x/badges/develop/build.svg?style=flat-square)

## 什么是FISH-X

FISH-X 是 FISH 下一代新版本。与阿里技术栈保持一致，在阿里开源项目（如桌面端Ant-design)上面继续开发，而不是从零开始做。

## FISH-X 平台完整蓝图

![](/public/architecture.png)

- Fish-Desktop-X，简称 FDX
- Fish-Mobile-X，简称 FMX
- Fish-Store-X，简称 FSX
- Fish-Topo-X，简称 FTX
- Fish-Koa-X，简称 FKX
- Fish-CLI-X，简称 FCX
- Fish-Unit-Test-X，简称 FUTX
- NGWEB-DSL-X，简称 NGX

其中，Fish-CLI-X 是底层工具；

Fish-Store-X 是一个全公司共享的前端模板 Store；

NGWEB-DSL-X 是自定义领域建模语言，我们自定义自己的标签规范和语言，然后通过 NGWEB-DSL-X 映射成运行时代码，从而摆脱前端技术不稳定给公司带来的技术风险，这个思路类似于微信小程序和钉钉小程序。



## FDX特点

- 整体上，FDX 与 FMX 相同的 React 技术栈，这样做的原因是最大程度降低业务组织的学习难度。
- 从阿里开源的组件库 AntD 上 fork 分支，而不是从零开始。这样做的目的是，降低对人力的需求。因为 UI 组件库的代码量非常庞大，FDX 做完之后预计会达到 10 万行 JS 代码的规模。目前我们的 FISH 版本已经超过 7 万行 JS，长期维护这样一个庞大的代码库需要消耗比较多的人力，这是很现实的成本。这里存在一个问题，阿里目前开源的 AntD 组件库是非常互联网化的风格，组件的外观很好看，但是每个组件的 feature 都相对比较简单，而软创目前的大部分业务项目还是后台管理类的项目，这些项目需要 UI 组件的特性非常复杂，我们需要投入比较多的人力来进行扩展和改造。
- 根据实际业务抽像出的标准组件接口。 组件接口作为媒介沟通页面跟具体组件实现。比如我们用到了某一个开源的 UI 组件，我们会根据实际业务抽象出一份标准接口，对开源组件进行二次封装之后再调用。这样即使后续需要更换其他组件，也不需要对页面进行改动。所有的 UI 组件，不论是我们自己造轮子写的，还是开源的，都是按照：1. 定义接口 -> 2. 进行封装 -> 3. 实现并上传 znpm 服务器 -> 4. 项目 depencency 中引用来自 znpm 的组件 IDL。 这样的流程来进行引用。
- 支持前端界面的微服务化，解决跨业务系统界面集成的难题。同时促进 UI/UX 规范化，方便跨业务系统集成

## 本地文档及示例查看
```
yarn install

npm run docz:dev
```

## 组件发布

- 修改组件代码
- 修改根目录下 package.json 文件中`version`中的版本号(***版本号要比之前的大***)
- 根目录先执行 npm run compile 再执行 npm run dist 最后 npm publish，要切换到npm官方源进行发包。

## 官网文档更新

请至CI/CD流程pipeline中手动运行prepare和doc
