zyf-model-engine 0.0.1

package/src/hooks/interface/index.ts

@@ -0,0 +1,32 @@
+export namespace Table {
+  export interface Pageable {
+    page: number;
+    limit: number;
+    total: number;
+  }
+  export interface StateProps {
+    tableData: any[];
+    pageable: Pageable;
+    searchParam: {
+      [key: string]: any;
+    };
+    searchInitParam: {
+      [key: string]: any;
+    };
+    totalParam: {
+      [key: string]: any;
+    };
+    icon?: {
+      [key: string]: any;
+    };
+  }
+}
+
+export namespace HandleData {
+  export type MessageType = "" | "success" | "warning" | "info" | "error";
+}
+
+export namespace Theme {
+  export type ThemeType = "light" | "inverted" | "dark";
+  export type GreyOrWeakType = "grey" | "weak";
+}

package/src/hooks/useOnline.ts

@@ -0,0 +1,27 @@
+import { ref, onMounted, onUnmounted } from "vue";
+
+/**
+ * @description 网络是否可用
+ * */
+export const useOnline = () => {
+  const online = ref(true);
+  const showStatus = (val: any) => {
+    online.value = typeof val == "boolean" ? val : val.target.online;
+  };
+  // 在页面加载后，设置正确的网络状态
+  navigator.onLine ? showStatus(true) : showStatus(false);
+
+  onMounted(() => {
+    // 开始监听网络状态的变化
+    window.addEventListener("online", showStatus);
+    window.addEventListener("offline", showStatus);
+  });
+
+  onUnmounted(() => {
+    // 移除监听网络状态的变化
+    window.removeEventListener("online", showStatus);
+    window.removeEventListener("offline", showStatus);
+  });
+
+  return { online };
+};

package/src/hooks/useTable.ts

@@ -0,0 +1,167 @@
+import { Table } from "./interface";
+import { http } from "@/api/index";
+import { fetchType } from "@/api/interface/index";
+/**
+ * @description table 页面操作方法封装
+ * @param {Function} api 获取表格数据 api 方法 (必传)
+ * @param {Object} initParam 获取数据初始化参数 (非必传，默认为{})
+ * @param {Boolean} isPageable 是否有分页 (非必传，默认为true)
+ * @param {Function} dataCallBack 对后台返回的数据进行处理的方法 (非必传)
+ * */
+export const useTable = (
+  initParam: object = {},
+  isPageable: boolean = true,
+  fetchType: fetchType,
+  tableLimit: number = 10,
+  api?: string | ((params: any) => Promise<any>),
+
+  dataCallBack?: (data: any) => any,
+  requestError?: (error: any) => void
+) => {
+  const state = reactive<Table.StateProps>({
+    // 表格数据
+    tableData: [],
+    // 分页数据
+    pageable: {
+      // 当前页数
+      page: 1,
+      // 每页显示条数
+      limit: tableLimit,
+      // // 总条数
+      total: 0
+    },
+    // 查询参数(只包括查询)
+    searchParam: {},
+    // 初始化默认的查询参数
+    searchInitParam: {},
+    // 总参数(包含分页和查询参数)
+    totalParam: {}
+  });
+
+  /**
+   * @description 分页查询参数(只包括分页和表格字段排序,其他排序方式可自行配置)
+   * */
+  const pageParam = computed({
+    get: () => {
+      return {
+        page: state.pageable.page,
+        limit: state.pageable.limit
+      };
+    },
+    set: (newVal: any) => {
+      console.log("我是分页更新之后的值", newVal);
+    }
+  });
+
+  /**
+   * @description 获取表格数据
+   * @return void
+   * */
+  const getTableList = async () => {
+    if (!api) return;
+    try {
+      // 先把初始化参数和分页参数放到总参数里面
+      Object.assign(state.totalParam, initParam, isPageable ? pageParam.value : {});
+
+      let data =
+        typeof api === "string"
+          ? await http[fetchType](api, { params: { ...state.searchInitParam, ...state.totalParam } })
+          : await api({ params: { ...state.searchInitParam, ...state.totalParam } });
+
+      dataCallBack && (data = await dataCallBack(data));
+      state.tableData = data.items || data;
+      // 解构后台返回的分页数据 (如果有分页更新分页信息)
+      if (isPageable) {
+        const { total } = data;
+        updatePageable({ ...pageParam.value, total });
+      }
+    } catch (error) {
+      requestError && requestError(error);
+    }
+  };
+
+  /**
+   * @description 更新查询参数
+   * @return void
+   * */
+  const updatedTotalParam = () => {
+    state.totalParam = {};
+    // 处理查询参数，可以给查询参数加自定义前缀操作
+    let nowSearchParam: Table.StateProps["searchParam"] = {};
+    // 防止手动清空输入框携带参数（这里可以自定义查询参数前缀）
+    for (let key in state.searchParam) {
+      // * 某些情况下参数为 false/0 也应该携带参数
+      if (state.searchParam[key] || state.searchParam[key] === false || state.searchParam[key] === 0) {
+        nowSearchParam[key] = state.searchParam[key];
+      }
+    }
+
+    // , isPageable ? pageParam.value : {}
+    Object.assign(state.totalParam, nowSearchParam);
+  };
+
+  /**
+   * @description 更新分页信息
+   * @param {Object} pageable 后台返回的分页数据
+   * @return void
+   * */
+  const updatePageable = (pageable: Table.Pageable) => {
+    Object.assign(state.pageable, pageable);
+  };
+
+  /**
+   * @description 表格数据查询
+   * @return void
+   * */
+  const search = () => {
+    state.pageable.page = 1;
+    updatedTotalParam();
+    getTableList();
+  };
+
+  /**
+   * @description 表格数据重置
+   * @return void
+   * */
+  const reset = () => {
+    state.pageable.page = 1;
+    state.searchParam = {};
+    // 重置搜索表单的时，如果有默认搜索参数，则重置默认的搜索参数
+    Object.keys(state.searchInitParam).forEach(key => {
+      state.searchParam[key] = state.searchInitParam[key];
+    });
+    updatedTotalParam();
+    getTableList();
+  };
+
+  /**
+   * @description 每页条数改变
+   * @param {Number} val 当前条数
+   * @return void
+   * */
+  const handleSizeChange = (val: number) => {
+    state.pageable.page = 1;
+    state.pageable.limit = val;
+    getTableList();
+  };
+
+  /**
+   * @description 当前页改变
+   * @param {Number} val 当前页
+   * @return void
+   * */
+  const handleCurrentChange = (val: number) => {
+    state.pageable.page = val;
+    getTableList();
+  };
+
+  return {
+    ...toRefs(state),
+    getTableList,
+    search,
+    reset,
+    handleSizeChange,
+    handleCurrentChange,
+    updatedTotalParam
+  };
+};

package/src/main.ts

@@ -0,0 +1,35 @@
+import { createApp, VueElement } from "vue";
+import App from "./App.vue";
+
+// reset style sheet
+import "@/styles/reset.scss";
+import "@/styles/element.scss";
+import "@/styles/reset.scss";
+
+// element dark css
+import "element-plus/theme-chalk/dark/css-vars.css";
+
+// element css
+import "element-plus/dist/index.css";
+// custom element css
+import "@/styles/element.scss";
+// svg icons
+import "virtual:svg-icons-register";
+// element plus
+import ElementPlus from "element-plus";
+// element icons
+import * as Icons from "@element-plus/icons-vue";
+// pinia store
+import pinia from "@/stores";
+
+const app = createApp(App);
+Object.keys(Icons).forEach(key => {
+  app.component(key, Icons[key as keyof typeof Icons]);
+});
+
+// errorHandler;
+import errorHandler from "@/utils/errorHandler";
+app.config.errorHandler = errorHandler;
+
+import vueMsg from "./plugins/index.js";
+app.use(ElementPlus).use(vueMsg).use(pinia).mount("#app");

package/src/plugins/button/button.vue

@@ -0,0 +1,56 @@
+<template>
+  <button class="btn">
+    <span>
+      <!-- 自定义插槽 -->
+      <slot></slot>
+    </span>
+  </button>
+</template>
+<script setup></script>
+
+<script>
+export default {
+  //一定要写组件名
+  name: "VueButton"
+};
+</script>
+
+<style scoped>
+.btn {
+  display: inline-block;
+  width: 200px;
+  padding: 18px;
+  margin: 5px;
+  font-size: 28px;
+  font-weight: 400;
+  color: #ffffffff;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  background-color: #f4511e;
+  border: none;
+  border-radius: 20px;
+  transition: all 0.5s;
+}
+.btn span {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  transition: 0.5s;
+}
+.btn span::after {
+  position: absolute;
+  top: 0;
+  right: -20px;
+  content: ">";
+  opacity: 0;
+  transition: 0.5s;
+}
+.btn:hover span {
+  padding-right: 30px;
+}
+.btn:hover span::after {
+  right: 0;
+  opacity: 1;
+}
+</style>

package/src/plugins/index.js

@@ -0,0 +1,26 @@
+//入口文件=>插件的入口=>统一管理文件
+//动态引入文件
+const requireComponent = import.meta.glob("./**/*.vue", { eager: true });
+const install = Vue => {
+  console.log(requireComponent);
+
+  Object.keys(requireComponent).forEach(fileName => {
+    //第i个组件
+    const config = requireComponent[fileName];
+    //组件名 刚才写的组件名派上用场了
+    const conponentName = config.default.name;
+
+    Vue.component(conponentName, config.default || config);
+  });
+  //这里也可以创建全局自定义指令 这里是创建了一个自动获取焦点的指令
+  Vue.directive("focus", {
+    mounted: function (el) {
+      el.focus();
+    }
+  });
+};
+
+//对外暴露install方法
+export default {
+  install
+};

package/src/plugins/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <input v-model="text" type="text" v-focus />
+  <vue-button @click="submit">123</vue-button>
+  <vue-msg ref="msg"></vue-msg>
+</template>
+
+<script setup>
+import { nextTick, ref } from "vue";
+let msg = ref();
+let text = ref("");
+function submit() {
+  if (text.value !== "") {
+    nextTick(() => {
+      msg.value.msgPlugin("提交成功", 1000);
+    });
+  } else {
+    nextTick(() => {
+      msg.value.msgPlugin("输入不能为空", 1000);
+    });
+  }
+}
+</script>
+
+<style scoped></style>

package/src/plugins/msg/msg.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="msg" ref="msg" :class="{ active: msgStatus }">
+    <div class="msg-warpper">
+      {{ text }}
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+//控制组件的显示
+let msgStatus = ref(false);
+let text = ref("");
+
+const msgPlugin = function (msg, time = 2000) {
+  text.value = msg;
+  msgStatus.value = true;
+  setTimeout(() => {
+    msgStatus.value = false;
+  }, time);
+};
+defineExpose({
+  //向外暴露方法
+  msgPlugin
+});
+</script>
+
+<script>
+export default {
+  name: "VueMsg"
+};
+</script>
+
+<style scoped>
+.msg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: -1;
+  width: 0;
+  height: 22px;
+  min-height: 0;
+  color: #ffffff;
+  text-align: center;
+  background-color: rgb(0 0 0 / 50%);
+  border-radius: 5px;
+  opacity: 0;
+  transition: all 0.5s;
+  transform: translate(-50%, -50%);
+}
+.msg.active {
+  z-index: 11;
+  width: 150px;
+  min-height: 25px;
+  opacity: 1;
+}
+</style>

package/src/stores/commonStore.ts

@@ -0,0 +1,9 @@
+const storeArr = import.meta.glob("@/stores/modules/*.ts", { eager: true });
+let store: Record<string, any> = {};
+Object.entries(storeArr).forEach(([key, useStore]) => {
+  for (const useKey in useStore as object) {
+    store[(useStore as any)[useKey].$id] = (useStore as any)[useKey]().$state;
+  }
+});
+// 取出项目中的所有全局变量
+export default store;

package/src/stores/index.ts

@@ -0,0 +1,8 @@
+import { createPinia } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+
+// pinia persist
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
+
+export default pinia;

package/src/stores/interface/index.ts

@@ -0,0 +1 @@
+export type AssemblySizeType = "large" | "default" | "small";

package/src/styles/common.scss

@@ -0,0 +1,87 @@
+/* flex */
+.flx-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.flx-justify-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.flx-align-center {
+  display: flex;
+  align-items: center;
+}
+.row-click {
+  color: $primary-color;
+  cursor: pointer;
+}
+.row-un-click {
+  color: var(--el-border-color-light);
+  cursor: not-allowed;
+}
+.full {
+  width: 100%;
+  height: 100%;
+}
+.w-full {
+  width: 100%;
+}
+.h-full {
+  height: 100%;
+}
+
+/* clearfix */
+.clearfix::after {
+  display: block;
+  height: 0;
+  overflow: hidden;
+  clear: both;
+  content: "";
+}
+
+/* 文字单行省略号 */
+.sle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 文字多行省略号 */
+.mle {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+/* 文字多了自动換行 */
+.break-word {
+  word-break: break-all;
+  word-wrap: break-word;
+}
+
+/* scroll bar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-thumb {
+  background-color: var(--el-fill-color-light) !important;
+  border-radius: 5px;
+}
+
+/* nprogress */
+#nprogress .bar {
+  background: var(--el-color-primary) !important;
+}
+#nprogress .spinner-icon {
+  border-top-color: var(--el-color-primary) !important;
+  border-left-color: var(--el-color-primary) !important;
+}
+#nprogress .peg {
+  box-shadow:
+    0 0 10px var(--el-color-primary),
+    0 0 5px var(--el-color-primary) !important;
+}