.editorconfig

@@ -1,20 +0,0 @@
-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

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

.eslintrc

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

.gitignore

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

.npmrc

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

.prettierignore

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

.prettierrc

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

.stylelintignore

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

.stylelintrc

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

Gruntfile.js

@@ -0,0 +1,121 @@
+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,63 +1,11 @@
-# README
+# FineUI-Start
 
-## 准备工作
+## 安装运行
+`git clone --recursive https://git.fanruan.com/dailer/FineUI-Start.git`
 
-### 克隆仓库
+`npm install`
 
-```shell
-git clone https://code.fineres.com/scm/fui/fineui-starter.git
-```
+`npm run grunt`
 
-### 安装依赖
-
-```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)
+## 示例效果
+![](./screenshorts/todolist.gif)

advance.html

@@ -0,0 +1,24 @@
+<!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

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

dist/bundle.css

@@ -0,0 +1,36 @@
+/**
+  列表项的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

@@ -0,0 +1,286 @@
+!(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"
+    });
+})();