oipage 1.0.0-alpha.2 → 1.0.0-beta.0

package/CHANGELOG

@@ -1,58 +1,19 @@
-v0.1.0:
-    date:2024-09-21
-    changes:
-      - 初始化版本
-        1、命令
-          （包括：help、server、version、config、delete、copy、pick、move、network、get、post、cat、run）
-        2、corejs
-          * animation 动画
-          * throttle 节流函数
-        3、browserjs
-          * getStyle 获取节点样式
-          * onReady 解析完执行
-        4、nodejs
-          * server 服务器
-          * options 命令行参数解析
-          * file 文件相关操作
-          * console 控制台打印
-            （包括：log、warn、error、linelog、deeplog）
-          * ajax 网络请求
-          * network 网络信息等
-          * data 资源数据
-          * image 图片相关操作
-          * loader 文件解析
-            （simpleScss、xhtml）
-        5、stylecss
-          * 统一浏览器样式 normalize.css
-          * 十二栅格化 rasterize.css
-          * 架屏动画 skeleton.css
-v0.2.0:
-    date:2024-12-01
-    changes:
-      - 优化改造
-        1、nodejs
-          * linelog新增清除行记录重置功能
-          * deeplog新增清除行记录重置功能
-      - 新增功能
-        1、nodejs
-          * plain 读取文本内容
-          * form 表单录入
-            （包括：input输入框、select列表选择）
-          * server hander方法补充api
-            （包括：getFileInfo()、filePath）
 v1.0.0:
     date:
     changes:
       - 原v0.x的功能将独立一个分支继续维护：https://github.com/oi-contrib/OIPage/blob/v0.x/CHANGELOG
         (v0.x保持对零碎方法这种形式的支持和维护，此版本开始将作为一个框架或一个系统的工具箱以提供更高效的使用方式，这是一次彻底的非兼容改造)
       - 初始化版本（v1.x）
-        1、API模块
+        1、API功能(浏览器)
           * animation 动画
-          * deeplog 进度打印
           * getStyle 获取节点样式
-          * linglog 单行打印
-          * onReady 等待DOM加载完毕执行
           * setStyle 设置节点样式
+          * onReady 加载完毕执行
+          * throttle 节流函数
+        2、API功能(Node.js)
+          * animation 动画
+          * deeplog 进度打印
+          * linglog 单行打印
           * throttle 节流函数
-        2、命令
+        3、命令（oipage-cli）
           * serve 开发服务器

package/README.md

@@ -1,5 +1,6 @@
-# [OIPage](https://github.com/oi-contrib/OIPage)
-前端网页或应用快速开发助手，包括开发服务器、辅助命令、实用API等
+-   💘 开源不易，去 <i>[Github给个Star](https://github.com/oi-contrib/OIPage) </i>吧！
+
+<img src='https://oi-contrib.github.io/OIPage/images/logo.png' height='100px'/>
 
 <p>
     <a href="https://zxl20070701.github.io/toolbox/#/npm-download?packages=oipage&interval=7">
@@ -7,14 +8,69 @@
     </a>
     <a href="https://www.npmjs.com/package/oipage">
         <img src="https://img.shields.io/npm/v/oipage.svg" alt="npm">
+    </a>
+     <a href="https://github.com/oi-contrib/OIPage/issues">
+        <img src="https://img.shields.io/github/issues/oi-contrib/OIPage" alt="issue">
     </a>
     <a href="https://github.com/oi-contrib/OIPage" target='_blank'>
         <img alt="GitHub repo stars" src="https://img.shields.io/github/stars/oi-contrib/OIPage?style=social">
     </a>
+     <a href="https://gitee.com/oi-contrib/OIPage" target='_blank'>
+        <img alt="Gitee repo stars" src="https://gitee.com/oi-contrib/OIPage/badge/star.svg">
+    </a>
+    <a href="https://gitee.com/oi-contrib/OIPage">
+        <img src="https://gitee.com/oi-contrib/OIPage/badge/fork.svg" alt="forks">
+    </a>
 </p>
 
 <img src="https://nodei.co/npm/oipage.png?downloads=true&amp;downloadRank=true&amp;stars=true" alt="NPM">
 
+# [OIPage](https://github.com/oi-contrib/OIPage)
+前端网页或应用快速开发助手，包括开发服务器、辅助命令、实用API等。官网地址：[https://oi-contrib.github.io/OIPage](https://oi-contrib.github.io/OIPage)
+
+## 如何使用？
+
+你可以作为一个命令行使用，那么你需要全局安装：
+
+```shell
+npm install -g oipage
+```
+
+也可以作为项目开发中的一个功能加强，在 package.json 中配置命令或nodejs文件中引入需要的模块使用，那么就在项目中执行安装命令：
+
+```shell
+npm install oipage --save
+```
+
+全局安装后，就可以直接作为命令行使用了。你可以打印帮助查看：
+
+```shell
+oipage-cli
+```
+
+比如会出现下列内容：
+
+```
+OIPage@v1.0.0
+
+可以使用的命令如下：
+
+【1】oipage-cli serve 开发服务器
+    --port|-p 端口号
+    --baseUrl 服务器根目录（相对命令行）
+......
+```
+
+根据提示我们知道，比如第一个命令，其提供了一个快速访问本地资源服务器的功能，比如执行：
+
+```shell
+oipage-cli serve -p 8080
+```
+
+启动成功后，直接访问： http://localhost:8080/ 即可。
+
+如果你需要在项目中使用，我们也提供了一些有用的API，具体可以访问[ 在线文档 ](https://oi-contrib.github.io/OIPage)进行了解。
+
 ## 版权
 
 MIT License

package/bin/resolve404.js

@@ -18,9 +18,9 @@ module.exports = function (filePath, url) {
 
     try {
         subItems = readdirSync(filePath);
-        console.log("<i> \x1b[1m\x1b[32m[OIPage-dev-server] Open Folder: " + url + '\x1b[0m ' + new Date().toLocaleString());
+        console.log("<i> \x1b[1m\x1b[32m[OIPage-dev-server] Read Folder: " + url + '\x1b[0m ' + new Date().toLocaleString());
     } catch (e) {
-        console.log("<i> \x1b[1m\x1b[32m[OIPage-dev-server] Open " + (/\/$/.test(url) ? "Folder" : "File") + ": \x1b[35m" + url + ' 404 Not Found\x1b[0m ' + new Date().toLocaleString());
+        console.log("<i> \x1b[1m\x1b[32m[OIPage-dev-server] Read " + (/\/$/.test(url) ? "Folder" : "File") + ": \x1b[35m" + url + ' 404 Not Found\x1b[0m ' + new Date().toLocaleString());
         try {
             filePath = join(filePath, "../");
             subItems = readdirSync(filePath);

package/bin/serve.js

@@ -35,7 +35,7 @@ module.exports = function (config) {
             response.write(readFileSync(filePath));
             response.end();
 
-            console.log("<i> \x1b[1m\x1b[32m[OIPage-dev-server] Open File: " + url + '\x1b[0m ' + new Date().toLocaleString());
+            console.log("<i> \x1b[1m\x1b[32m[OIPage-dev-server] Read File: " + url + '\x1b[0m ' + new Date().toLocaleString());
         }
 
         // 否则就是404

package/nodejs/animation/index.js

@@ -1,5 +1,5 @@
 /*!
-* animation of OIPage v1.0.0-alpha.2
+* animation of OIPage v1.0.0-beta.0
 * git+https://github.com/oi-contrib/OIPage.git
 */
 
@@ -92,14 +92,16 @@ function animation(doback, duration, callback) {
         doback(deep);
     }, duration, callback);
 
-    // 返回一个函数
-    // 用于在动画结束前结束动画
-    return function () {
-        var i;
-        for (i in $timers) {
-            if ($timers[i].id == id) {
-                $timers[i].id = void 0;
-                return;
+    return {
+        // 一个函数
+        // 用于在动画结束前结束动画
+        stop: function () {
+            var i;
+            for (i in $timers) {
+                if ($timers[i].id == id) {
+                    $timers[i].id = void 0;
+                    return;
+                }
             }
         }
     };

package/nodejs/cmdlog/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 单行打印
+ * @param stream 打印的内容
+ */
+export interface linelogType {
+    (stream: string): void
+}
+
+export let linelog: linelogType
+
+/**
+ * 进度打印
+ * @param percentum 进度0-100 
+ * @param stream 说明文字,可选
+ */
+export interface deeplogType {
+    (percentum: number, stream?: string): void
+}
+
+export let deeplog: deeplogType

package/nodejs/{linelog → cmdlog}/index.js

@@ -1,5 +1,5 @@
 /*!
-* linelog of OIPage v1.0.0-alpha.2
+* cmdlog of OIPage v1.0.0-beta.0
 * git+https://github.com/oi-contrib/OIPage.git
 */
 
@@ -48,5 +48,35 @@ let linelog = (function (stream) {
 
     };
 })(process.stdout);
-
+
+/**
+ * 进度打印
+ * 
+ * @param {number} percentum 进度0-100 
+ * @param {string} stream 说明文字,可选
+ */
+function deeplog (percentum, stream) {
+    if (arguments.length == 0) {
+        linelog();
+        return;
+    }
+
+    if (arguments.length <= 1) stream = "";
+
+    let txt = "",
+        i = 0;
+
+    // 补充已经有的进度
+    for (; i <= percentum && i <= 100; i += 5) {
+        txt += "█";
+    }
+
+    // 补充余下的空白
+    for (; i <= 100; i += 5) {
+        txt += "░";
+    }
+
+    linelog(percentum.toFixed(2) + "%[" + txt + "]" + stream);
+};
 exports.linelog = linelog;
+exports.deeplog = deeplog;

package/nodejs/throttle/index.js

@@ -1,5 +1,5 @@
 /*!
-* throttle of OIPage v1.0.0-alpha.2
+* throttle of OIPage v1.0.0-beta.0
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "oipage",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-beta.0",
   "description": "前端网页或应用快速开发助手，包括开发服务器、辅助命令、实用API等",
   "sideEffects": false,
   "scripts": {
     "dev": "node ./build/index.js watch",
     "build": "node ./build/index.js",
-    "docs": "node ./bin/run serve -p 20000 --baseUrl ./docs"
+    "serve": "node ./bin/run serve -p 20000"
   },
   "bin": {
     "oipage-cli": "bin/run"
@@ -33,7 +33,7 @@
   "bugs": {
     "url": "https://github.com/oi-contrib/OIPage/issues"
   },
-  "homepage": "https://github.com/oi-contrib/OIPage",
+  "homepage": "https://oi-contrib.github.io/OIPage",
   "devDependencies": {
     "oipage": "^0.2.0"
   }

package/web/animation/index.js

@@ -1,5 +1,5 @@
 /*!
-* animation of OIPage v1.0.0-alpha.2
+* animation of OIPage v1.0.0-beta.0
 * git+https://github.com/oi-contrib/OIPage.git
 */
 
@@ -18,7 +18,7 @@ var $timerId;
  *
  * @returns {function} 返回一个函数，调用该函数，可以提前结束动画
  */
-function animation(doback, duration, callback) {
+export function animation(doback, duration, callback) {
     if (arguments.length < 2) duration = 400;
     if (arguments.length < 3) callback = function () { };
 
@@ -92,17 +92,18 @@ function animation(doback, duration, callback) {
         doback(deep);
     }, duration, callback);
 
-    // 返回一个函数
-    // 用于在动画结束前结束动画
-    return function () {
-        var i;
-        for (i in $timers) {
-            if ($timers[i].id == id) {
-                $timers[i].id = void 0;
-                return;
+    return {
+        // 一个函数
+        // 用于在动画结束前结束动画
+        stop: function () {
+            var i;
+            for (i in $timers) {
+                if ($timers[i].id == id) {
+                    $timers[i].id = void 0;
+                    return;
+                }
             }
         }
     };
 
-};
-export let animation = animation;
+};

package/web/onReady/index.js

@@ -1,14 +1,13 @@
 /*!
-* onReady of OIPage v1.0.0-alpha.2
+* onReady of OIPage v1.0.0-beta.0
 * git+https://github.com/oi-contrib/OIPage.git
 */
 
-function onReady(callback) {
+export function onReady(callback) {
     var readyState = document.readyState;
     if (readyState === 'interactive' || readyState === 'complete') {
         callback();
     } else {
         window.addEventListener("DOMContentLoaded", callback);
     }
-};
-export let onReady = onReady;
+};

package/web/style/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 设置节点样式
+ */
+export interface setStyleType {
+    (el: HTMLElement, styles: {
+        [key: string]: string | number
+    }): void
+}
+
+export let setStyle: setStyleType
+
+/**
+ * 获取节点样式
+ */
+export interface getStyleType {
+    (el: HTMLElement, name: string): string
+    (el: HTMLElement): {
+        [key: string]: string
+    }
+}
+
+export let getStyle: getStyleType

package/web/{getStyle → style}/index.js

@@ -1,9 +1,15 @@
 /*!
-* getStyle of OIPage v1.0.0-alpha.2
+* style of OIPage v1.0.0-beta.0
 * git+https://github.com/oi-contrib/OIPage.git
 */
 
-function getStyle(el, name) {
+export function setStyle(el, styles) {
+    for (var key in styles) {
+        el.style[key] = styles[key];
+    }
+};
+
+export function getStyle(el, name) {
 
     // 获取结点的全部样式
     var allStyle = document.defaultView && document.defaultView.getComputedStyle ?
@@ -15,5 +21,4 @@ function getStyle(el, name) {
         allStyle.getPropertyValue(name) :
         allStyle;
 
-};
-export let getStyle = getStyle;
+};

package/web/throttle/index.js

@@ -1,9 +1,9 @@
 /*!
-* throttle of OIPage v1.0.0-alpha.2
+* throttle of OIPage v1.0.0-beta.0
 * git+https://github.com/oi-contrib/OIPage.git
 */
 
-function throttle(callback, _option) {
+export function throttle(callback, _option) {
 
     // 缺省值
     var option = {
@@ -52,5 +52,4 @@ function throttle(callback, _option) {
         }
 
     };
-};
-export let throttle = throttle;
+};

package/nodejs/deeplog/index.d.ts

@@ -1,10 +0,0 @@
-/**
- * 进度打印
- * @param percentum 进度0-100 
- * @param stream 说明文字,可选
- */
-export interface deeplogType {
-    (percentum: number, stream?: string): void
-}
-
-export let deeplog: deeplogType

package/nodejs/deeplog/index.js

@@ -1,35 +0,0 @@
-/*!
-* deeplog of OIPage v1.0.0-alpha.2
-* git+https://github.com/oi-contrib/OIPage.git
-*/
-const {linelog} = require("../linelog/index.js");
-/**
- * 进度打印
- * 
- * @param {number} percentum 进度0-100 
- * @param {string} stream 说明文字,可选
- */
-function deeplog (percentum, stream) {
-    if (arguments.length == 0) {
-        linelog();
-        return;
-    }
-
-    if (arguments.length <= 1) stream = "";
-
-    let txt = "",
-        i = 0;
-
-    // 补充已经有的进度
-    for (; i <= percentum && i <= 100; i += 5) {
-        txt += "█";
-    }
-
-    // 补充余下的空白
-    for (; i <= 100; i += 5) {
-        txt += "░";
-    }
-
-    linelog(percentum.toFixed(2) + "%[" + txt + "]" + stream);
-};
-exports.deeplog = deeplog;

package/nodejs/linelog/index.d.ts

@@ -1,9 +0,0 @@
-/**
- * 单行打印
- * @param stream 打印的内容
- */
-export interface linelogType {
-    (stream: string): void
-}
-
-export let linelog: linelogType

package/web/getStyle/index.d.ts

@@ -1,11 +0,0 @@
-/**
- * 获取节点样式
- */
-export interface getStyleType {
-    (el: HTMLElement, name: string): string
-    (el: HTMLElement): {
-        [key: string]: string
-    }
-}
-
-export let getStyle: getStyleType

package/web/setStyle/index.d.ts

@@ -1,10 +0,0 @@
-/**
- * 设置节点样式
- */
-export interface setStyleType {
-    (el: HTMLElement, styles: {
-        [key: string]: string | number
-    }): void
-}
-
-export let setStyle: setStyleType

package/web/setStyle/index.js

@@ -1,11 +0,0 @@
-/*!
-* setStyle of OIPage v1.0.0-alpha.2
-* git+https://github.com/oi-contrib/OIPage.git
-*/
-
-function setStyle(el, styles) {
-    for (var key in styles) {
-        el.style[key] = styles[key];
-    }
-};
-export let setStyle = setStyle;