zyf-model-engine 0.0.1 → 0.0.2

package/src/components/SvgIcon/index.vue

@@ -1,20 +0,0 @@
-<template>
-  <svg class="icon" :style="iconStyle" aria-hidden="true">
-    <use :xlink:href="symbolId" />
-  </svg>
-</template>
-
-<script setup lang="ts" name="SvgIcon">
-import { computed, CSSProperties } from "vue";
-interface SvgProps {
-  name: string; // 图标的名称 ==> 必传
-  prefix?: string; // 图标的前缀 ==> 非必传（默认为"icon"）
-  iconStyle?: CSSProperties; // 图标的样式 ==> 非必传
-}
-const props = withDefaults(defineProps<SvgProps>(), {
-  prefix: "icon",
-  iconStyle: () => ({ width: "1em", height: "1em" })
-});
-const symbolId = computed(() => `#${props.prefix}-${props.name}`);
-</script>
-<style></style>

package/src/components/Tabs/index.vue

@@ -1,142 +0,0 @@
-<template>
-  <div :class="{ 'full-box': full, tab: true }">
-    <el-tabs
-      v-if="tabPans?.length"
-      ref="tabsRef"
-      :model-value="activeName"
-      @tab-click="onTabClick"
-      @tab-change="onTabChange"
-      :before-leave="onBeforeLeave"
-      @tab-remove="onRemoveTab"
-      v-bind="config"
-    >
-      <div class="tab-pane-class" style="width: 100%; height: 100%">
-        <el-tab-pane
-          v-for="(item, index) in tabPans as any"
-          :key="index"
-          :lazy="lazy"
-          :label="item[prop.label]"
-          :name="item[prop.name] ?? index"
-          :disabled="item.disabled"
-        >
-          <template #label v-if="item?.labelRender || item?.useLabel">
-            <component v-if="item?.labelRender" :is="item?.labelRender" v-bind="item"> </component>
-            <slot v-if="item?.useLabel" :label="item[prop.label]" :pane-name="item[prop.name] ?? index" :item="item" />
-          </template>
-          <slot
-            v-if="[item[prop.name], index].includes(activeName)"
-            :item="item"
-            :index="index"
-            :key="item[prop.name] ?? index"
-          />
-        </el-tab-pane>
-      </div>
-    </el-tabs>
-    <empty v-else />
-  </div>
-</template>
-<script setup lang="ts">
-const props = defineProps({
-  full: {
-    type: Boolean,
-    default: () => true
-  },
-
-  tabPans: {
-    type: Array,
-    required: true
-  },
-  activeName: {
-    type: [Number, String],
-    default: () => 0
-  },
-  config: {
-    type: Object,
-    default: () => {}
-  },
-  // 配置选项
-  prop: {
-    type: Object,
-    default: () => {
-      return {
-        label: "name",
-        name: "id"
-      };
-    }
-  },
-
-  // 	标签是否延迟渲染
-  lazy: {
-    type: Boolean,
-    default: () => true
-  },
-  beforeLeave: {
-    type: Function,
-    default: () => {
-      return true;
-    }
-  }
-});
-const emit = defineEmits(["onTabClick", "onTabChange", "onRemoveTab"]);
-
-const onBeforeLeave = async (activeName: any, oldActiveName: any) => {
-  return await props.beforeLeave(activeName, oldActiveName);
-};
-const onTabClick = (pane: any, e: any) => {
-  emit("onTabClick", pane.props.name, pane, e);
-};
-const onTabChange = (name: any) => {
-  emit("onTabChange", name);
-};
-const onRemoveTab = (name: any) => {
-  emit("onRemoveTab", name);
-};
-const tabsRef = ref();
-defineExpose({ tabsRef });
-</script>
-<style lang="scss" scoped>
-.tab {
-  :deep(.el-tabs) {
-    .el-tabs__nav {
-      .el-tabs__item {
-        font-size: 14px;
-        font-weight: 500;
-        color: #8c9094;
-      }
-      .is-active {
-        font-family: MiSans-Regular, MiSans;
-        font-size: 14px;
-        font-weight: 400;
-        color: $primary-color;
-      }
-      .el-tabs__active-bar {
-        background-color: $primary-color;
-      }
-      .is-disabled {
-        color: #d7d7d7;
-        cursor: not-allowed;
-      }
-    }
-    .el-tabs__nav-wrap::after {
-      display: none;
-    }
-  }
-}
-.full-box {
-  height: 100%;
-  :deep(.el-tabs) {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    .el-tabs__content {
-      flex: 1;
-      .el-tab-pane {
-        height: 100%;
-        .main {
-          height: 100%;
-        }
-      }
-    }
-  }
-}
-</style>

package/src/config/index.ts

@@ -1,12 +0,0 @@
-// ? 全局默认配置项
-// 项目名称区分   智能建造基础版
-export const DEMO_KEY: string = import.meta.env.VITE_GLOB_DEMO_KEY as string;
-export const TITLE: string = import.meta.env.VITE_GLOB_APP_TITLE as string;
-
-// 默认主题颜色
-export const DEFAULT_PRIMARY: string = "#00A5A7";
-
-// 路由白名单地址（必须是本地存在的路由 staticRouter.ts 中）
-export const ROUTER_WHITE_LIST: string[] = ["/500"];
-
-export const USE_LOCAL_FILE_ROUTER = true;

package/src/config/nprogress.ts

@@ -1,12 +0,0 @@
-import NProgress from "nprogress";
-import "nprogress/nprogress.css";
-
-NProgress.configure({
-  easing: "ease", // 动画方式
-  speed: 500, // 递增进度条的速度
-  showSpinner: true, // 是否显示加载ico
-  trickleSpeed: 200, // 自动递增间隔
-  minimum: 0.3 // 初始化时的最小百分比
-});
-
-export default NProgress;

package/src/config/piniaPersist.ts

@@ -1,19 +0,0 @@
-import { PersistedStateOptions } from "pinia-plugin-persistedstate";
-import { DEMO_KEY } from "./index";
-/**
- * @description pinia 持久化参数配置
- * @param {String} key 存储到持久化的 name
- * @param {Array} paths 需要持久化的 state name
- * @return persist
- * */
-const piniaPersistConfig = (key: string, paths?: string[]) => {
-  const persist: PersistedStateOptions = {
-    key: DEMO_KEY + key,
-    storage: localStorage,
-    // storage: sessionStorage,
-    paths
-  };
-  return persist;
-};
-
-export default piniaPersistConfig;

package/src/config/serviceLoading.ts

@@ -1,45 +0,0 @@
-import { ElLoading } from "element-plus";
-
-/* 全局请求 loading */
-let loadingInstance: ReturnType<typeof ElLoading.service>;
-
-/**
- * @description 开启 Loading
- * */
-const startLoading = () => {
-  loadingInstance = ElLoading.service({
-    fullscreen: true,
-    lock: true,
-    text: "Loading",
-    background: "rgba(0, 0, 0, 0.7)"
-  });
-};
-
-/**
- * @description 结束 Loading
- * */
-const endLoading = () => {
-  loadingInstance.close();
-};
-
-/**
- * @description 显示全屏加载
- * */
-let needLoadingRequestCount = 0;
-export const showFullScreenLoading = () => {
-  if (needLoadingRequestCount === 0) {
-    startLoading();
-  }
-  needLoadingRequestCount++;
-};
-
-/**
- * @description 隐藏全屏加载
- * */
-export const tryHideFullScreenLoading = () => {
-  if (needLoadingRequestCount <= 0) return;
-  needLoadingRequestCount--;
-  if (needLoadingRequestCount === 0) {
-    endLoading();
-  }
-};

package/src/enums/httpEnum.ts

@@ -1,24 +0,0 @@
-/**
- * @description：请求方法
- */
-export enum RequestEnum {
-  GET = "GET",
-  POST = "POST",
-  PATCH = "PATCH",
-  PUT = "PUT",
-  DELETE = "DELETE"
-}
-
-/**
- * @description：常用的 contentTyp 类型
- */
-export enum ContentTypeEnum {
-  // json
-  JSON = "application/json;charset=UTF-8",
-  // text
-  TEXT = "text/plain;charset=UTF-8",
-  // form-data 一般配合qs
-  FORM_URLENCODED = "application/x-www-form-urlencoded;charset=UTF-8",
-  // form-data 上传
-  FORM_DATA = "multipart/form-data;charset=UTF-8"
-}

package/src/hooks/interface/index.ts

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

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

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

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

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

@@ -1,26 +0,0 @@
-//入口文件=>插件的入口=>统一管理文件
-//动态引入文件
-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

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