fast-vue-multi-pages-vite 1.0.0

package/README.md

@@ -0,0 +1,63 @@
+# fast-vue-multi-pages-vite
+### Vite-快速搭建VUE项目工具类的基本库，主要用于每个功能页面独立生成html，不使用vue单页面功能。
+
+## Install
+```
+npm i fast-vue-multi-pages-vite
+```
+
+## Package.json配置
+
+```
+"dependencies": {
+    "fast-vue-multi-pages-vite": "^1.0.0", //具体版本以npm库更新为准
+}
+```
+
+
+
+## 配置vue.config.js 文件，快速配置VUE项目代码，复制如下代码：
+```
+const {FastViteMultiPages} = require("fast-vue-multi-pages/vue");
+
+const result = FastViteMultiPages.getDefaultVueConfig(__dirname, {
+    projectTitle: "项目标题",
+    projectPagesDir: ["src/user_pages"],
+    projectOutDir: "dist",
+    autoCreateProjectIndexPage: false,
+    autoCreatePageConfigFile: true,
+    buildLevel: 1,
+    httpFinalParams:  {
+        userTest: true,
+    },
+    httpBeforeRequest: function (config) {
+        console.log("httpBeforeRequest", config);
+    },
+    httpAfterRequest: function (response) {
+        console.log("httpAfterRequest", response);
+    },
+    globalConfig: {},
+    injectJsFiles: ["src/js/iconfont.js"],
+    clientStrict: true
+});
+
+module.exports = result;
+```
+
+
+# 使用默认工具类
+
+### 引用库之后，在项目中导入即可，例如：
+```
+import {FastVueMultiTool} from "fast-vue-multi-pages-vite";
+
+FastVueMultiTool.Http.get("接口地址", {
+  orderId: 1
+}).then(result => {
+  if (result.isSuccess()) {
+    console.error(result.getData());
+  } else {
+    console.error(result.getMessage());
+  }
+});
+```

package/component/fast-layout-body.vue

@@ -0,0 +1,100 @@
+<script>
+import {defineComponent} from 'vue'
+import {FastVueMultiTool} from "fast-vue-multi-pages-vite";
+
+/**
+ * 浮动垂直 header-body-footer 布局，其中：header 与 footer 布局将悬浮在body中
+ */
+export default defineComponent({
+  name: "fast-layout-body",
+  props: {
+    /**
+     * header默认高度
+     */
+    headerDefaultHeight: {
+      type: String,
+      default: "0px",
+    },
+    /**
+     * footer默认高度
+     */
+    footerDefaultHeight: {
+      type: String,
+      default: "0px",
+    },
+  },
+  data() {
+    return {
+      footerHeight: this.footerDefaultHeight,
+      headerHeight: this.headerDefaultHeight,
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      this.headerHeight = FastVueMultiTool.Element.getRealSize(this.$refs.header).height + "px";
+      this.footerHeight = FastVueMultiTool.Element.getRealSize(this.$refs.footer).height + "px";
+    });
+  }
+});
+
+</script>
+
+<template>
+
+  <!--suppress HtmlUnknownAttribute -->
+  <div fast-layout-float-v-header-body-footer class="fast-layout-float-layout-container">
+    <div ref="header" class="fast-layout-float-layout-header">
+      <slot name="header"></slot>
+    </div>
+
+    <div class="fast-layout-float-layout-body">
+      <div :style="{height:headerHeight}"></div>
+
+      <slot name="body"></slot>
+
+      <div :style="{height:footerHeight}"></div>
+    </div>
+
+    <div ref="footer" class="fast-layout-float-layout-footer">
+      <slot name="footer"></slot>
+    </div>
+
+  </div>
+
+</template>
+
+<style scoped>
+
+.fast-layout-float-layout-container {
+  position: relative;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+.fast-layout-float-layout-body {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
+.fast-layout-float-layout-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  z-index: 1;
+}
+
+
+.fast-layout-float-layout-footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  z-index: 1;
+}
+
+</style>

package/component/fast-layout-fullscreen.vue

@@ -0,0 +1,32 @@
+<script>
+import {defineComponent} from 'vue'
+
+export default defineComponent({
+  name: "fast-layout-fullscreen",
+  props: {
+    scrollable: {
+      type: Boolean,
+      default: false,
+    }
+  }
+})
+</script>
+
+<template>
+  <!--suppress HtmlUnknownAttribute -->
+  <div fast-layout-fullscreen class="fast-layout-container-fullscreen" :style="{overflow:scrollable?'auto':'hidden'}">
+    <slot/>
+  </div>
+</template>
+
+<style scoped>
+.fast-layout-container-fullscreen {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw !important;
+  height: 100vh !important;
+  position: fixed;
+}
+</style>

package/component/fast-panel-collapse.vue

@@ -0,0 +1,108 @@
+<script>
+import {defineComponent} from 'vue'
+import {FastVueMultiTool} from "fast-vue-multi-pages";
+
+export default defineComponent({
+  name: "fast-panel-collapse",
+  props: {
+    collapsed: {
+      type: Boolean,
+      default: false
+    },
+    duration: {
+      type: Number,
+      default: 300
+    },
+    showEasing: {
+      type: String,
+      default: 'linear'
+    },
+    closeEasing: {
+      type: String,
+      default: 'linear'
+    }
+  },
+  emits: ["update:collapsed"],
+  watch: {
+    collapsed(newValue) {
+      if (newValue) {
+        this.closePanel();
+      } else {
+        this.showPanel();
+      }
+    }
+  },
+  data() {
+    return {
+      panelCode: "",
+      initSize: {
+        width: 0,
+        height: 0
+      }
+    }
+  },
+  created() {
+    this.panelCode = FastVueMultiTool.UUID.buildOnlyCode("Panel");
+    this.$nextTick(() => {
+      this.initSize = FastVueMultiTool.Element.getRealSize(this.$refs.content);
+      if (this.collapsed) {
+        this.$refs.panel.style.height = "0px";
+      }
+    });
+  },
+  methods: {
+    showPanel() {
+      this.$nextTick(() => {
+        this.initSize = FastVueMultiTool.Element.getRealSize(this.$refs.content);
+        FastVueMultiTool.Animate.startValueAnimate(this.panelCode, {
+          from: 0,
+          to: this.initSize.height,
+          duration: this.duration,
+          easing: this.showEasing,
+          update: (value) => {
+            this.$refs.panel.style.height = value + "px";
+          },
+          begin: () => {
+            this.$refs.panel.style.height = "0px";
+          },
+          complete: () => {
+            this.$refs.panel.style.height = this.initSize.height + "px";
+          },
+        });
+      });
+    },
+    closePanel() {
+      this.$nextTick(() => {
+        this.initSize = FastVueMultiTool.Element.getRealSize(this.$refs.content);
+        FastVueMultiTool.Animate.startValueAnimate(this.panelCode, {
+          from: this.initSize.height,
+          to: 0,
+          duration: this.duration,
+          easing: this.closeEasing,
+          update: (value) => {
+            this.$refs.panel.style.height = value + "px";
+          },
+          complete: () => {
+            this.$refs.panel.style.height = "0px";
+          },
+        });
+      });
+
+    },
+  }
+});
+</script>
+
+<template>
+  <div ref="panel" class="fast-panel-collapse">
+    <div ref="content">
+      <slot/>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.fast-panel-collapse {
+  overflow: hidden;
+}
+</style>

package/dist/cjs/FastVueMultiTool.d.ts

@@ -0,0 +1,107 @@
+import _ from "lodash";
+import { FastVueMultiHttp } from "./http/FastVueMultiHttp";
+import { FastVueMultiStore } from "./other/FastVueMultiStore";
+import { FastViteMultiConfig } from "./vite/FastViteMultiConfig";
+import { FastVueMultiCookie } from "./http/FastVueMultiCookie";
+import { FastVueMultiClipboard } from "./other/FastVueMultiClipboard";
+import { FastVueMultiDate } from "./other/FastVueMultiDate";
+import { FastVueMultiBoolean } from "./other/FastVueMultiBoolean";
+import { FastVueMultiFunction } from "./other/FastVueMultiFunction";
+import { FastVueMultiElement } from "./other/FastVueMultiElement";
+import { FastVueMultiWindow } from "./other/FastVueMultiWindow";
+import { FastVueMultiFile } from "./other/FastVueMultiFile";
+import { FastVueMultiBase64 } from "./other/FastVueMultiBase64";
+import { FastVueMultiEventBus } from "./other/FastVueMultiEventBus";
+import { FastVueMultiObject } from "./other/FastVueMultiObject";
+import { FastVueMultiUUID } from "./other/FastVueMultiUUID";
+import { FastVueMultiAnimate } from "./other/FastVueMultiAnimate";
+import moment from "moment";
+/**
+ * FastVueMultiTool 工具类
+ */
+export declare class FastVueMultiTool {
+    /**
+     * 页面配置工具类
+     */
+    static PageConfig: typeof FastViteMultiConfig;
+    /**
+     * 常规的网络接口请求类，返回格式要求为JSON：{success:true,message:"消息",data:{}}
+     */
+    static SimpleHttp: typeof FastVueMultiHttp.Simple;
+    /**
+     * 网络请求工具类
+     */
+    static Http: typeof FastVueMultiHttp.Base;
+    /**
+     * 页面数据缓存工具类
+     */
+    static Store: typeof FastVueMultiStore;
+    /**
+     * cookie操作
+     */
+    static Cookie: typeof FastVueMultiCookie;
+    /**
+     * 剪贴板操作
+     */
+    static Clipboard: typeof FastVueMultiClipboard;
+    /**
+     * Lodash工具类 https://lodash.com/docs/
+     */
+    static Lodash: _.LoDashStatic;
+    /**
+     * Lodash工具类 https://lodash.com/docs/
+     */
+    static _: _.LoDashStatic;
+    /**
+     * crypto-js工具类 https://cryptojs.gitbook.io/docs/
+     */
+    static Crypto: any;
+    /**
+     * 日期类操作
+     */
+    static Date: typeof FastVueMultiDate;
+    /**
+     * boolean工具类
+     */
+    static Boolean: typeof FastVueMultiBoolean;
+    /**
+     * function工具类
+     */
+    static Function: typeof FastVueMultiFunction;
+    /**
+     * html元素操作工具类
+     */
+    static Element: typeof FastVueMultiElement;
+    /**
+     * window对象相关操作
+     */
+    static Window: typeof FastVueMultiWindow;
+    /**
+     * 文件选择器
+     */
+    static File: typeof FastVueMultiFile;
+    /**
+     * base64相关操作
+     */
+    static Base64: typeof FastVueMultiBase64;
+    /**
+     * 事件传递
+     */
+    static EventBus: typeof FastVueMultiEventBus;
+    /**
+     * 对象相关操作
+     */
+    static Object: typeof FastVueMultiObject;
+    /**
+     * UUID操作
+     */
+    static UUID: typeof FastVueMultiUUID;
+    /**
+     * 数值动画类
+     */
+    static Animate: typeof FastVueMultiAnimate;
+    /**
+     * moment工具类 http://momentjs.com/
+     */
+    static Moment: typeof moment;
+}

package/dist/cjs/FastVueMultiTool.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FastVueMultiTool = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const FastVueMultiHttp_1 = require("./http/FastVueMultiHttp");
+const FastVueMultiStore_1 = require("./other/FastVueMultiStore");
+const FastViteMultiConfig_1 = require("./vite/FastViteMultiConfig");
+const FastVueMultiCookie_1 = require("./http/FastVueMultiCookie");
+const FastVueMultiClipboard_1 = require("./other/FastVueMultiClipboard");
+const FastVueMultiDate_1 = require("./other/FastVueMultiDate");
+const FastVueMultiBoolean_1 = require("./other/FastVueMultiBoolean");
+const FastVueMultiFunction_1 = require("./other/FastVueMultiFunction");
+const FastVueMultiElement_1 = require("./other/FastVueMultiElement");
+const FastVueMultiWindow_1 = require("./other/FastVueMultiWindow");
+const FastVueMultiFile_1 = require("./other/FastVueMultiFile");
+const FastVueMultiBase64_1 = require("./other/FastVueMultiBase64");
+const FastVueMultiEventBus_1 = require("./other/FastVueMultiEventBus");
+const FastVueMultiObject_1 = require("./other/FastVueMultiObject");
+const FastVueMultiUUID_1 = require("./other/FastVueMultiUUID");
+const FastVueMultiAnimate_1 = require("./other/FastVueMultiAnimate");
+const moment_1 = tslib_1.__importDefault(require("moment"));
+/**
+ * FastVueMultiTool 工具类
+ */
+class FastVueMultiTool {
+    /**
+     * 页面配置工具类
+     */
+    static PageConfig = FastViteMultiConfig_1.FastViteMultiConfig;
+    /**
+     * 常规的网络接口请求类，返回格式要求为JSON：{success:true,message:"消息",data:{}}
+     */
+    static SimpleHttp = FastVueMultiHttp_1.FastVueMultiHttp.Simple;
+    /**
+     * 网络请求工具类
+     */
+    static Http = FastVueMultiHttp_1.FastVueMultiHttp.Base;
+    /**
+     * 页面数据缓存工具类
+     */
+    static Store = FastVueMultiStore_1.FastVueMultiStore;
+    /**
+     * cookie操作
+     */
+    static Cookie = FastVueMultiCookie_1.FastVueMultiCookie;
+    /**
+     * 剪贴板操作
+     */
+    static Clipboard = FastVueMultiClipboard_1.FastVueMultiClipboard;
+    /**
+     * Lodash工具类 https://lodash.com/docs/
+     */
+    static Lodash = lodash_1.default;
+    /**
+     * Lodash工具类 https://lodash.com/docs/
+     */
+    static _ = lodash_1.default;
+    /**
+     * crypto-js工具类 https://cryptojs.gitbook.io/docs/
+     */
+    static Crypto = require("crypto-js");
+    /**
+     * 日期类操作
+     */
+    static Date = FastVueMultiDate_1.FastVueMultiDate;
+    /**
+     * boolean工具类
+     */
+    static Boolean = FastVueMultiBoolean_1.FastVueMultiBoolean;
+    /**
+     * function工具类
+     */
+    static Function = FastVueMultiFunction_1.FastVueMultiFunction;
+    /**
+     * html元素操作工具类
+     */
+    static Element = FastVueMultiElement_1.FastVueMultiElement;
+    /**
+     * window对象相关操作
+     */
+    static Window = FastVueMultiWindow_1.FastVueMultiWindow;
+    /**
+     * 文件选择器
+     */
+    static File = FastVueMultiFile_1.FastVueMultiFile;
+    /**
+     * base64相关操作
+     */
+    static Base64 = FastVueMultiBase64_1.FastVueMultiBase64;
+    /**
+     * 事件传递
+     */
+    static EventBus = FastVueMultiEventBus_1.FastVueMultiEventBus;
+    /**
+     * 对象相关操作
+     */
+    static Object = FastVueMultiObject_1.FastVueMultiObject;
+    /**
+     * UUID操作
+     */
+    static UUID = FastVueMultiUUID_1.FastVueMultiUUID;
+    /**
+     * 数值动画类
+     */
+    static Animate = FastVueMultiAnimate_1.FastVueMultiAnimate;
+    /**
+     * moment工具类 http://momentjs.com/
+     */
+    static Moment = moment_1.default;
+}
+exports.FastVueMultiTool = FastVueMultiTool;

package/dist/cjs/http/FastVueMultiCookie.d.ts

@@ -0,0 +1,18 @@
+export declare class FastVueMultiCookie {
+    /**
+     * 设置cookie
+     * @param key 键
+     * @param value 值
+     */
+    static setCookie(key: string, value: string): void;
+    /**
+     * 获取cookie
+     * @param key 键
+     */
+    static getCookie(key: string): string | undefined;
+    /**
+     * 删除cookie
+     * @param key 键
+     */
+    static removeCookie(key: string): void;
+}

package/dist/cjs/http/FastVueMultiCookie.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FastVueMultiCookie = void 0;
+const tslib_1 = require("tslib");
+const js_cookie_1 = tslib_1.__importDefault(require("js-cookie"));
+class FastVueMultiCookie {
+    /**
+     * 设置cookie
+     * @param key 键
+     * @param value 值
+     */
+    static setCookie(key, value) {
+        js_cookie_1.default.set(key, value);
+    }
+    /**
+     * 获取cookie
+     * @param key 键
+     */
+    static getCookie(key) {
+        return js_cookie_1.default.get(key);
+    }
+    /**
+     * 删除cookie
+     * @param key 键
+     */
+    static removeCookie(key) {
+        js_cookie_1.default.remove(key);
+    }
+}
+exports.FastVueMultiCookie = FastVueMultiCookie;

package/dist/cjs/http/FastVueMultiHttp.d.ts

@@ -0,0 +1,128 @@
+import { AxiosPromise } from 'axios';
+import { FastVueMultiSimpleJsonResponse } from './FastVueMultiSimpleJsonResponse';
+import { FastVueMultiSimpleRequestConfig } from './FastVueMultiSimpleRequestConfig';
+/**
+ * FastVueMultiHttp 网咯请求接口工具类
+ * @author Janesen
+ */
+export declare namespace FastVueMultiHttp {
+    /**
+     * 基本的网络请求接口
+     */
+    class Base {
+        /**
+         * 获取地址栏携带的参数
+         * @param paramName 参数名
+         */
+        static getWindowUrlParam(paramName: string): string | null;
+        /**
+         * 获取地址栏携带的参数对象信息
+         */
+        static getWindowUrlInfo(): any;
+        /**
+         * 获取url的参数
+         * @param url 地址
+         * @param paramName 参数名
+         */
+        static getUrlParam(url: string, paramName: string): string | null;
+        /**
+         * 获取url的参数实体对象
+         * @param url 地址
+         */
+        static getUrlParamInfo(url: string): any;
+        /**
+         * 追加url参数
+         * @param url
+         * @param params
+         */
+        static appendUrlParams(url: string, params: any): string;
+        /**
+         * 合并多个FormData参数
+         * @param formData
+         */
+        static mergeFormData(...formData: FormData[]): FormData;
+        /**
+         * 如果是formData对象则转转换参数为object对象
+         * @param param
+         */
+        static convertToObject(param: any): object;
+        /**
+         * 转换参数为FormData格式
+         * @param param 任意格式的参数，FormData、Object、Function
+         */
+        static convertToFormData(param: any): FormData;
+        /**
+         * 合并参数并转换为FormData格式
+         * @param params 任意多个参数，FormData、Object、Function
+         */
+        static mergeParams(...params: any[]): FormData;
+        /**
+         * 将数组格式的参数合并
+         * @param params 数组
+         */
+        static mergeParamsByArray(params: any[]): FormData;
+        /**
+         * 发起接口请求
+         * @param method 请求方法，例如，post、get
+         * @param url 请求地址
+         * @param params 请求参数
+         */
+        static doRequest(method: string, url: string, params: any): AxiosPromise;
+        /**
+         * 执行post请求
+         * @param url 请求地址
+         * @param params 请求参数，可为object或form data
+         */
+        static doPost(url: string, params: any): AxiosPromise;
+        /**
+         * 执行get请求
+         * @param url 请求接口地址
+         * @param params 请求接口参数
+         */
+        static doGet(url: string, params?: any): AxiosPromise;
+        /**
+         * 获取请求接口的默认头信息配置
+         */
+        static getFinalHeaders(): any;
+        /**
+         * 获取接口的全局参数
+         */
+        static getFinalParams(): any;
+        /**
+         * 构建接口请求的缓存key
+         * @param url 请求地址
+         * @param params 请求参数
+         */
+        static buildCacheKey(url: string, params: any): string;
+    }
+    /**
+     * 常规的接口请求类，返回格式要求为JSON：{success:true,message:"消息",data:{}}
+     */
+    class Simple extends Base {
+        /**
+         * 发起请求接口
+         * @param method 请求方法，例如：post、get
+         * @param url 接口地址 完整的地址，例如：http://loalhost:8080/user/login
+         * @param params 参数
+         * @param config 请求配置
+         * @param callBack 请求接口回调函数，在使用alwaysCache和alwaysBackRequest参数为true时，必须使用回调函数接收
+         */
+        static request(method: string, url: string, params?: any, config?: FastVueMultiSimpleRequestConfig, callBack?: (result: FastVueMultiSimpleJsonResponse) => void): Promise<FastVueMultiSimpleJsonResponse>;
+        /**
+         * post请求接口
+         * @param url 接口地址 完整的地址，例如：http://loalhost:8080/user/login
+         * @param params 参数
+         * @param config 请求配置
+         * @param callBack 请求接口回调函数，在使用alwaysCache和alwaysBackRequest参数为true时，必须使用回调函数接收
+         */
+        static post(url: string, params?: any, config?: FastVueMultiSimpleRequestConfig, callBack?: (result: FastVueMultiSimpleJsonResponse) => void): Promise<FastVueMultiSimpleJsonResponse>;
+        /**
+         * get请求接口
+         * @param url 接口地址 完整的地址，例如：http://loalhost:8080/user/login
+         * @param params 参数
+         * @param config 请求配置
+         * @param callBack 请求接口回调函数，在使用alwaysCache和alwaysBackRequest参数为true时，必须使用回调函数接收
+         */
+        static get(url: string, params?: any, config?: FastVueMultiSimpleRequestConfig, callBack?: (result: FastVueMultiSimpleJsonResponse) => void): Promise<FastVueMultiSimpleJsonResponse>;
+    }
+}