Wizard

A document of code manager platform

Wizard

🍳A document of code manager platform.

Features

• Online document editing
• Permission to operate
• Modify record view
• Multi-person writing

Technology

• FN: React Mobx Typescript styled-components
• Middleware: Node -> ssr
• BN: Goland
• Cache DB: Redis
• Primary DB: PostgreSQL

Dev

Client 文件目录结构:

├── build // dist
├── public // 静态目录存放
├── src
│   ├── app
│   │   ├── ui // 业务无关组件
│   │   ├── assets  // 静态素材
│   │   ├── components // 业务组件
│   │   ├── constant // 常量文件
│   │   ├── index.tsx // bootstrap
│   │   ├── pages // 完整的页面
│   │   ├── routes // 抽象通用的路由
│   │   ├── services // 前端 service
│   │   ├── store // mobx 的 store
│   │   ├── theme // 全局注入的一些样式，包括 styled-components 和 material-design
│   │   └── utils // 工具
│   ├── index.tsx // 启始文件，实际导出真实 index.tsx
│   ├── ssr // 存放 ssr 必须文件
│   └── test // jest 测试

DI

service 可通过封装的 react-ts-di 进行注入

@Injectable()
class Foo {}

------

@Inject
foo!:Foo

store 通过 InjectStore 来进行注入，其实跟 react-ts-di 做了同样的事情，不过维护了两个单例池，考虑是否有必要单独抽出来

export class MainTabs {
 @observable
 tabTag: number = 0;

 @action
 changeTab(): void {
   this.tabTag = 1;
 }
}

------

@InjectStore
tabs!: MainTabs

Regex

正则统一封装在 services/regex 下，通过 readonly 常量暴露给外部使用，外部使用正则统一使用注入的 regex, 调用上面的方法

Validator

通用的 Validator 经过抽象放在 ui/form-control/validators 目录下，通过 form-control-types 暴露出去

TODO

• three.js 应用 - 衍生出一些小游戏彩蛋
• three.js main panel
• 上传文件缓存