Merge pull request 'KERNEL-9248 refactor: 重构' (#5) from Cauchy.Ke/fineui-start:feature into feature

Reviewed-on: #5

.editorconfig

@@ -0,0 +1,20 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{js,ts,jsx,tsx}]
+indent_size = 4
+
+[*.{less,html,ejs}]
+indent_size = 2
+
+[*.json]
+indent_size = 2
+
+[tsconfig.json]
+indent_size = 4

.eslintignore

@@ -0,0 +1,5 @@
+types
+node_modules
+dist
+assets
+docs

.eslintrc

@@ -1,171 +1,47 @@
-{
-  "extends": "eslint:recommended",
-  "rules": {
-    // 声明
-    "no-use-before-define": "error",
-    //禁止定义前使用
-
-    // 对象
-    "no-dupe-keys": "error",
-    // 禁止在对象字面量中出现重复的键
-    "quote-props": [
-      "error",
-      "as-needed"
-    ],
-    // 对象属性只在需要的时候加引号
-
-    // 字符串
-    "quotes": [
-      "error",
-      "double",
-      {
-        "allowTemplateLiterals": true
-      }
-    ],
-    // 字符串开头和结束使用双引号
-    "no-useless-concat": "error",
-    // 禁止没有必要的字符拼接
-    "no-useless-escape": "error",
-    // 禁用不必要的转义
-
-    // 函数
-    "no-dupe-args": "error",
-    // 禁止在 function 定义中出现重复的参数
-    "space-before-function-paren": "error",
-    // 函数括号前必须要有空格
-
-    // 变量
-    "no-undef": "error",
-    // 禁止使用未声明的变量
-
-    // 比较运算符 & 相等运算符
-    "eqeqeq": "error",
-    // 使用 === 和 !== 代替 == 和 !=
-    "no-unneeded-ternary": "error",
-    //禁止可以在有更简单的可替代的表达式时使用三元操作符
-
-    // 条件
-    "default-case": "error",
-    // 要求 Switch 语句中有 Default 分支
-    "no-else-return": "error",
-    // 如果 if 块中包含了一个 return 语句，else 块就成了多余的了。可以将其内容移至块外
 
-    // 代码块
-    "brace-style": [
-      "error",
-      "1tbs",
 {
-        "allowSingleLine": true
+  "env": {
-      }
+    "browser": true,
-    ],
+    "node": true,
-    // 代码块左括号紧跟上一行结束
+    "es6": true,
-    "curly": [
+    "jest/globals": true
-      "error",
+  },
-      "multi-line"
+  "plugins": ["jest", "react"],
-    ],
+  "extends": ["plugin:@fui/typescript", "plugin:@fui/prettier"],
-    // if、else if、else、for、while强制使用大括号，但允许在单行中省略大括号
+  "parserOptions": {
-
+    "ecmaFeatures": {
-    // 注释
+      "legacyDecorators": true,
-    "spaced-comment": "error",
+      "jsx": true
-    // 注释前有空格
-
-    // 空白
-    "indent": [
-      "error",
-      4,
-      {
-        "SwitchCase": 1
-      }
-    ],
-    // 缩进控制4空格
-    "no-mixed-spaces-and-tabs": "error",
-    // 禁止使用 空格 和 tab 混合缩进
-    "space-before-blocks": [
-      "error",
-      "always"
-    ],
-    // 语句块之前的需要有空格
-    "space-infix-ops": [
-      "error",
-      {
-        "int32Hint": false
-      }
-    ],
-    // 要求中缀操作符周围有空格,设置 int32Hint 选项为 true (默认 false) 允许 a|0 不带空格
-    "no-trailing-spaces": [
-      "error",
-      {
-        "skipBlankLines": true
-      }
-    ],
-    // 禁用行尾空格
-    "key-spacing": [
-      "error",
-      {
-        "afterColon": true
     }
-    ],
+  },
-    // 要求在对象字面量的冒号和值之间存在至少有一个空格
+  "rules": {
-
+    // 由于prettier和eslint一起使用需要关闭一些规则，但是prettier没有以下规则的配置，统一写在这里
-
+    // 对象字面量简写语法
-    // 逗号
+    "object-shorthand": ["error", "always"],
-    "comma-style": "error",
+    // 函数体在必要的时候使用大括号
-    // 逗号必须放在行末
+    "arrow-body-style": [
-    "comma-dangle": [
-      "error",
-      "never"
-    ],
-    // 多行对象字面量中要求不要拖尾逗号
-    "comma-spacing": [
       "error",
+      "as-needed",
       {
-        "before": false,
+        "requireReturnForObjectLiteral": true
-        "after": true
       }
     ],
-    //在变量声明、数组字面量、对象字面量、函数参数 和 序列中禁止在逗号前使用空格,要求在逗号后使用一个或多个空格
+    // 回调使用用箭头函数
-
+    "prefer-arrow-callback": "error",
+    // 如果 if 块中包含了一个 return 语句，else 块就成了多余的了。可以将其内容移至块外
+    "no-else-return": "error",
+    "no-use-before-define": "off",
 
-    // 分号
+    "react/jsx-uses-react": "error",
-    "semi": "error",
+    "react/jsx-uses-vars": "error"
-    //不得省略语句结束的分号
+  },
-    "semi-spacing": [
+  "overrides": [
-      "error",
     {
-        "before": false,
+      "files": ["*.ts", "*.tsx"],
-        "after": true
+      "rules": {
+        "no-undef": "off",
+        "no-unused-vars": "off"
       }
-    ],
-    //禁止分号周围的空格
-    "no-extra-semi": "error",
-    // 禁用不必要的分号
-
-
-    // 类型转换
-    "no-extra-boolean-cast": "error",
-    // 禁止不必要的布尔类型转换
-
-
-    // 其他最佳实践或规范
-    "no-unexpected-multiline": "error",
-    // 禁止使用令人困惑的多行表达式
-    "no-unreachable": "error",
-    // 禁止在 return、throw、continue 和 break 语句后出现不可达代码
-    "valid-typeof": "error",
-    // 强制 typeof 表达式与有效的字符串进行比较
-    "no-new-wrappers": "error"
-    // 禁止通过 new 操作符使用 String、Number 和 Boolean
-  },
-  "globals": {
-    "window": true,
-    "BI": true,
-    "BICst": true,
-    "Data": true,
-    "Fix": true,
-    "module": true,
-    "describe": true,
-    "it": true,
-    "expect": true,
-    "Dec": true
     }
+  ]
 }

.gitignore

@@ -47,5 +47,7 @@ crashlytics.properties
 crashlytics-build.properties
 
 /node_modules/
+
+/dist
 package-lock.json
 yarn.lock

.npmrc

@@ -0,0 +1,2 @@
+registry=https://registry.npm.taobao.org
+@fui:registry=https://npm.fineres.com/

.prettierignore

@@ -0,0 +1,5 @@
+types
+node_modules
+dist
+assets
+docs

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "printWidth": 160
+}

.stylelintignore

@@ -0,0 +1,5 @@
+types
+node_modules
+dist
+assets
+docs

.stylelintrc

@@ -0,0 +1,7 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-prettier/recommended"],
+  "rules": {
+    "no-descending-specificity": null,
+    "selector-pseudo-element-colon-notation": "single"
+  }
+}

Gruntfile.js

@@ -1,121 +0,0 @@
-module.exports = function (grunt) {
-    // Project configuration.
-    grunt.initConfig({
-        pkg: grunt.file.readJSON("package.json"),
-        concat: {
-            options: {
-                separator: ""
-            },
-            bundleJs: {
-                src: [
-                    "src/modules/**/*.js",
-                    "src/index.js"
-                ],
-                dest: "dist/bundle.js"
-            },
-            bundleCss: {
-                src: ["src/css/**/*.css"],
-                dest: "dist/bundle.css"
-            }
-        },
-
-        less: {
-            main: {
-                expand: true,
-                cwd: "src/modules",
-                src: ["**/*.less"],
-                dest: "src/css/",
-                ext: ".css"
-            },
-            dev: {
-                options: {
-                    compress: true,
-                    yuicompress: false
-                }
-            }
-        },
-
-        uglify: {
-            options: {
-                banner:
-                    "/*! <%= pkg.name %> <%= grunt.template.today(\"dd-mm-yyyy\") %> */\n"
-            },
-            dist: {
-                files: {
-                    "dist/bundle.min.js": ["<%= concat.bundleJs.dest %>"]
-                }
-            }
-        },
-
-        cssmin: {
-            bundleCss: {
-                src: "<%= concat.bundleCss.dest %>",
-
-                dest: "dist/bundle.min.css"
-            }
-        },
-
-        jshint: {
-            files: ["src/**/*.js"],
-            options: {
-                globals: {
-                    $: true,
-                    jQuery: true,
-                    console: true,
-                    module: true,
-                    document: true
-                },
-                browser: true,
-                expr: true
-            }
-        },
-        watch: {
-            scripts: {
-                files: ["src/**/*.js", "src/**/*.less"],
-                tasks: ["less", "concat"],
-                options: {
-                    spanw: true,
-                    interrupt: true
-                }
-            },
-            livereload: {
-                options: {
-                    livereload: "<%= connect.options.livereload %>"
-                },
-                files: ["src/**/*.js", "src/**/*.less"]
-            }
-        },
-        connect: {
-            options: {
-                port: 9000,
-                open: true,
-                livereload: 35799,
-                // Change this to '0.0.0.0' to access the server from outside
-                hostname: "localhost"
-            },
-            server: {
-                options: {
-                    port: 9009,
-                    base: "./"
-                }
-            }
-        }
-    });
-
-    grunt.loadNpmTasks("grunt-contrib-uglify");
-    grunt.loadNpmTasks("grunt-contrib-jshint");
-    grunt.loadNpmTasks("grunt-contrib-less");
-    grunt.loadNpmTasks("grunt-contrib-watch");
-    grunt.loadNpmTasks("grunt-contrib-concat");
-    grunt.loadNpmTasks("grunt-contrib-cssmin");
-    grunt.loadNpmTasks("grunt-contrib-connect");
-
-    grunt.registerTask("default", [
-        "jshint",
-        "less",
-        "concat",
-        "connect",
-        "watch"
-    ]);
-    grunt.registerTask("min", ["less", "concat", "uglify", "cssmin"]);
-};

README.md

@@ -1,11 +1,63 @@
-# FineUI-Start
+# README
 
-## 安装运行
+## 准备工作
-`git clone --recursive https://git.fanruan.com/dailer/FineUI-Start.git`
 
-`npm install`
+### 克隆仓库
 
-`npm run grunt`
+```shell
+git clone https://code.fineres.com/scm/fui/fineui-starter.git
+```
 
-## 示例效果
+### 安装依赖
-![](./screenshorts/todolist.gif)
+
+```shell
+# 账户：public
+# 密码：fr123456
+# 邮箱：任意
+npm adduser --registry https://npm.fineres.com
+npm install
+```
+
+### 安装扩展
+
+以 VSCode 为例，为保证代码规范和格式统一，请安装`ESLint`、`stylelint`、`Prettier`、`EditorConfig`扩展，以使相关配置文件生效。
+
+## 开发工作
+
+### 项目基础配置
+
+布局配置请见`src/modules/app/layout/layout.constant.ts`。
+
+样式配置请见`src/less/`，譬如`src/less/lib/constant`中的`@color-app-primary`表示项目的主色。
+
+### 项目调试、打包与测试
+
+```shell
+# 调试
+npm run start
+
+# 打包
+npm run build
+
+# 测试
+npm run test
+```
+
+### 项目规范和格式检查
+
+```shell
+# 代码规范
+npm run eslint
+npm run eslint:fix
+
+# 样式规范
+npm run stylelint
+npm run stylelint:fix
+
+# 代码格式
+npm run prettier
+```
+
+## 效果预览
+
+![页面截图](./screenshots/demo.jpeg)

advance.html

@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <title></title>
-    <!--核心css文件，自带font、图片等，使用的是fineui资源-->
-    <link rel="stylesheet" type="text/css" href="node_modules/fineui/dist/core.css" />
-    <!-- 下面是不包含normalize.css的css -->
-    <!-- <link rel="stylesheet" type="text/css" href="node_modules/fineui/dist/2.0/fineui_without_normalize.css" /> -->
-    <!-- 这里定义的是本地资源路径，如有需要修改可以复制出来替换其中路径，并在此处加载替换后的css -->
-    <link rel="stylesheet" type="text/css" href="node_modules/fineui/dist/resource.css" />
-    <!--个人代码样式-->
-    <link rel="stylesheet" type="text/css" href="./dist/bundle.css"/>
-</head>
-<body>
-    <div id="wrapper"></div>
-    <!--核心js-->
-    <script src="node_modules/fineui/dist/core.js"></script>
-    <!-- 这里定义的是本地一些配置项，比如国际化，如有需要修改可以复制出来替换其中配置，并在此处加载替换后的js -->
-    <script src="node_modules/fineui/dist/resource.js"></script>
-    <!--个人代码js-->
-    <script src="./dist/bundle.js"></script>
-</body>
-</html>

babel.config.js

@@ -0,0 +1 @@
+module.exports = require('@fui/babel-preset-fineui').configs.base;

dist/bundle.css

@@ -1,36 +0,0 @@
-/**
-  列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求
- */
-.my-todolist-header {
-  background-color: #3d4d66;
-}
-.my-todolist-header .my-todolist-title {
-  font-size: 22px;
-  color: #FFF;
-}
-.my-todolist-header .my-todolist-header-editor {
-  background-color: #FFF;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-}
-/**
-  列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius方法等.请选择性使用.不强制要求
- */
-.my-todolist-list .my-todolist-list-text {
-  font-size: 16px;
-  font-weight: bold;
-}
-.my-todolist-list .my-todolist-list-count-container {
-  -webkit-border-radius: 10px;
-  -moz-border-radius: 10px;
-  border-radius: 10px;
-  background-color: #3d4d66;
-  color: #ffffff;
-}
-/**
-  列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求
- */
-.my-todolist-background {
-  background-color: #f7f8fa;
-}

dist/bundle.js

@@ -1,286 +0,0 @@
-!(function() {
-    /**
-     * 顶部组件,提供输入框添加todo项目
-     * 布局: bi.horizontal_auto 实现水平居中. bi.left_right_vertical_adapt 实现标题是输入框的靠左靠右垂直居中
-     */
-    var ToDoListHeader = BI.inherit(BI.Widget, {
-
-        props: {
-            //  指定组件的className
-            baseCls: "my-todolist-header"
-        },
-
-        render: function() {
-            var self = this, o = this.options;
-            return {
-                type: "bi.horizontal_auto",  // 水平居中布局
-                items: [
-                    {
-                        el: {
-                            type: "bi.left_right_vertical_adapt",  //  左右垂直居中布局
-                            width: 600,
-                            height: o.height,
-                            items: {
-                                left: [
-                                    {
-                                        el: {
-                                            type: "bi.label",
-                                            cls: "my-todolist-title",
-                                            text: "FineUI ToDoList",
-                                            height: o.height
-                                        }
-                                    }
-                                ],
-                                right: [
-                                    {
-                                        el: {
-                                            type: "bi.editor",
-                                            ref: function(_ref) {
-                                                self.editor = _ref;
-                                            },
-                                            allowBlank: true,
-                                            cls: "my-todolist-header-editor",
-                                            watermark: "添加ToDo",
-                                            width: 300,
-                                            height: 24,
-                                            listeners: [
-                                                {  //  监听bi.editor 组件的"EVENT_ENTER"事件(即敲回车),触发事件ToDoListHeader.EVENT_ADD事件并将输入框值置空
-                                                    eventName: "EVENT_ENTER",
-                                                    action: function() {
-                                                        //  注意:在这里this指向的是bi.editor的实例.通过bi.editor的getValue()方法获取输入框输入值.
-                                                        self.fireEvent(ToDoListHeader.EVENT_ADD, this.getValue());
-                                                        self.editor.setValue("");
-                                                    }
-                                                }
-                                            ]
-                                        }
-                                    }
-                                ]
-                            }
-                        }
-                    }
-                ]
-            };
-        }
-    });
-
-    ToDoListHeader.EVENT_ADD = "EVENT_ADD";
-
-    BI.shortcut("my.todolist.header", ToDoListHeader);
-})();!(function() {
-    /**
-     * todo项列表
-     *
-     */
-    var List = BI.inherit(BI.Widget, {
-
-        props: {
-            //  指定组件的className
-            baseCls: "my-todolist-list",
-            text: "正在进行"
-        },
-
-        render: function() {
-            var self = this, o = this.options;
-            return {
-                type: "bi.vertical",
-                items: [
-                    {
-                        el: {
-                            type: "bi.vertical_adapt",
-                            height: 40,
-                            items: [
-                                {
-                                    type: "bi.label",
-                                    cls: "my-todolist-list-text",
-                                    textAlign: "left",
-                                    text: o.text,
-                                    width: 580
-                                }, {
-                                    type: "bi.center_adapt",
-                                    cls: "my-todolist-list-count-container",
-                                    width: 20,
-                                    height: 20,
-                                    items: [
-                                        {
-                                            el: {
-                                                type: "bi.label",
-                                                ref: function(_ref) {
-                                                    self.count = _ref;
-                                                },
-                                                text: "0"
-                                            }
-                                        }
-                                    ]
-                                }
-                            ]
-                        }
-                    }, {  // 用bi.vertical布局作为列表项的容器.
-                        type: "bi.vertical",
-                        vgap: 10,
-                        ref: function(_ref) {
-                            self.list = _ref;
-                        },
-                        items: this._createItems(o.items)
-                    }
-                ]
-            };
-        },
-
-        _createItems: function(items) {
-            var self = this;
-            return BI.map(items, function(index, item) {
-                return BI.extend(item, {
-                    type: "bi.multi_select_item",  // 节点采用复选节点展示
-                    selected: item.done,  // 已完成的todo项置为选中状态
-                    disabled: item.done,  // 已完成的todo项置为灰化状态
-                    listeners: [
-                        {  // 为每个todo项添加"EVENT_CHANGE"事件监听,触发组件自身"EVENT_CHANGE"事件
-                            eventName: "EVENT_CHANGE",
-                            action: function(v) {
-                                self.fireEvent("EVENT_CHANGE", v);
-                            }
-                        }
-                    ]
-                });
-            });
-        },
-
-        _setCount: function(count) {
-            this.count.setText(count);
-        },
-
-        populate: function(items) {
-            this.list.populate(this._createItems(items));
-            this._setCount(items.length);
-        }
-    });
-    BI.shortcut("my.todolist.list", List);
-})();!(function() {
-    /**
-     * todolist 组件
-     */
-    var ToDoList = BI.inherit(BI.Widget, {
-
-        props: {
-            baseCls: "fine-to-do-list"
-        },
-
-        // 生命周期函数,在组件创建前
-        beforeCreate: function() {
-            //  初始化存储数据
-            this.list = localStorage.getItem("fine-todolist") ? JSON.parse(localStorage.getItem("fine-todolist")) : [];
-        },
-
-        render: function() {
-            var self = this, o = this.options;
-            return {
-                type: "bi.vtape",  // vtape布局,顶部高度固定,下部分列表占满高度
-                items: [
-                    {
-                        el: {
-                            type: "my.todolist.header",  // 顶部组件
-                            listeners: [
-                                {  // 监听组件的EVENT_ADD事件,新建todo项
-                                    eventName: "EVENT_ADD",
-                                    action: function(v) {
-                                        self.addToDo(v);
-                                    }
-                                }
-                            ],
-                            height: 40
-                        },
-                        height: 40
-                    }, {
-                        type: "bi.horizontal_auto",  // 水平居中布局
-                        cls: "my-todolist-background",  // 添加className
-                        items: [
-                            {
-                                el: {
-                                    type: "my.todolist.list",  // need todo项列表
-                                    ref: function(_ref) {
-                                        self.todolist = _ref;
-                                    },
-                                    items: this._getNeedTodoList(),
-                                    text: "正在进行",
-                                    listeners: [
-                                        {  // 监听EVENT_CHANGE事件,完成某一项todo
-                                            eventName: "EVENT_CHANGE",
-                                            action: function(v) {
-                                                self.finishTodo(v);
-                                            }
-                                        }
-                                    ],
-                                    width: 600
-                                }
-                            }, {
-                                el: {
-                                    type: "my.todolist.list",  //  已经完成的todo项列表
-                                    text: "已经完成",
-                                    items: this._getAlreadyDoneList(),
-                                    ref: function(_ref) {
-                                        self.donelist = _ref;
-                                    },
-                                    width: 600
-                                }
-                            }
-                        ]
-                    }
-                ]
-            };
-        },
-
-        _updateLocalStorage: function() {
-            localStorage.setItem("fine-todolist", JSON.stringify(this.list));
-        },
-
-        _getNeedTodoList: function() {
-            return BI.filter(this.list, function(index, item) {
-                return !item.done;
-            });
-        },
-
-        _getAlreadyDoneList: function() {
-            return BI.filter(this.list, function(index, item) {
-                return item.done;
-            });
-        },
-
-        /**
-         * 添加todo项
-         * @param text todo项的内容
-         */
-        addToDo: function(text) {
-            this.list.push({
-                value: BI.UUID(),
-                text: text,
-                done: false
-            });
-            this.todolist.populate(this._getNeedTodoList());
-            this._updateLocalStorage();
-        },
-
-        /**
-         * 完成某一项todo
-         * @param v todo项的value
-         */
-        finishTodo: function(v) {
-            BI.some(this.list, function(index, item) {
-                if (item.value === v) {
-                    item.done = true;
-                }
-            });
-            this.todolist.populate(this._getNeedTodoList());
-            this.donelist.populate(this._getAlreadyDoneList());
-            this._updateLocalStorage();
-        }
-    });
-    BI.shortcut("my.todolist", ToDoList);
-})();
-!(function () {
-    // 将todolist组件挂载到#wrapper上.
-    BI.createWidget({
-        type: "my.todolist",
-        element: "#wrapper"
-    });
-})();