@liujitcn/kratos-admin-core 0.0.1

package/dist/package/src/directives/modules/draggable.ts

@@ -0,0 +1,50 @@
+/*
+	需求：实现一个拖拽指令，可在父元素区域任意拖拽元素。
+
+	思路：
+		1、设置需要拖拽的元素为absolute，其父元素为relative。
+		2、鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。
+		3、鼠标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值，并改变元素的 left 和 top 值
+		4、鼠标松开(onmouseup)时完成一次拖拽
+
+	使用：在 Dom 上加上 v-draggable 即可
+	<div class="dialog-model" v-draggable></div>
+*/
+import type { Directive } from "vue";
+/** 拖拽指令需要访问父节点尺寸的元素类型。 */
+interface ElType extends HTMLElement {
+  parentNode: any;
+}
+const draggable: Directive = {
+  mounted: function (el: ElType) {
+    el.style.cursor = "move";
+    el.style.position = "absolute";
+    el.onmousedown = function (e) {
+      let disX = e.pageX - el.offsetLeft;
+      let disY = e.pageY - el.offsetTop;
+      document.onmousemove = function (e) {
+        let x = e.pageX - disX;
+        let y = e.pageY - disY;
+        let maxX = el.parentNode.offsetWidth - el.offsetWidth;
+        let maxY = el.parentNode.offsetHeight - el.offsetHeight;
+        if (x < 0) {
+          x = 0;
+        } else if (x > maxX) {
+          x = maxX;
+        }
+
+        if (y < 0) {
+          y = 0;
+        } else if (y > maxY) {
+          y = maxY;
+        }
+        el.style.left = x + "px";
+        el.style.top = y + "px";
+      };
+      document.onmouseup = function () {
+        document.onmousemove = document.onmouseup = null;
+      };
+    };
+  }
+};
+export default draggable;

package/dist/package/src/directives/modules/longpress.ts

@@ -0,0 +1,49 @@
+/**
+ * v-longpress
+ * 长按指令，长按时触发事件
+ */
+import type { Directive, DirectiveBinding } from "vue";
+
+const directive: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    if (typeof binding.value !== "function") {
+      throw "callback must be a function";
+    }
+    // 定义变量
+    let pressTimer: any = null;
+    // 创建计时器（ 2秒后执行函数 ）
+    const start = (e: any) => {
+      if (e.button) {
+        if (e.type === "click" && e.button !== 0) {
+          return;
+        }
+      }
+      if (pressTimer === null) {
+        pressTimer = setTimeout(() => {
+          handler(e);
+        }, 1000);
+      }
+    };
+    // 取消计时器
+    const cancel = () => {
+      if (pressTimer !== null) {
+        clearTimeout(pressTimer);
+        pressTimer = null;
+      }
+    };
+    // 运行函数
+    const handler = (e: MouseEvent | TouchEvent) => {
+      binding.value(e);
+    };
+    // 添加事件监听器
+    el.addEventListener("mousedown", start);
+    el.addEventListener("touchstart", start);
+    // 取消计时器
+    el.addEventListener("click", cancel);
+    el.addEventListener("mouseout", cancel);
+    el.addEventListener("touchend", cancel);
+    el.addEventListener("touchcancel", cancel);
+  }
+};
+
+export default directive;

package/dist/package/src/directives/modules/throttle.ts

@@ -0,0 +1,42 @@
+/*
+  需求：防止按钮在短时间内被多次点击，使用节流函数限制规定时间内只能点击一次。
+
+  思路：
+    1、第一次点击，立即调用方法并禁用按钮，等延迟结束再次激活按钮
+    2、将需要触发的方法绑定在指令上
+  
+  使用：给 Dom 加上 v-throttle 及回调函数即可
+  <button v-throttle="debounceClick">节流提交</button>
+*/
+import type { Directive, DirectiveBinding } from "vue";
+/** 节流指令挂载点击处理函数和禁用状态的元素类型。 */
+interface ElType extends HTMLElement {
+  __handleClick__: () => any;
+  disabled: boolean;
+}
+const throttle: Directive = {
+  mounted(el: ElType, binding: DirectiveBinding) {
+    if (typeof binding.value !== "function") {
+      throw "callback must be a function";
+    }
+    let timer: NodeJS.Timeout | null = null;
+    el.__handleClick__ = function () {
+      if (timer) {
+        clearTimeout(timer);
+      }
+      if (!el.disabled) {
+        el.disabled = true;
+        binding.value();
+        timer = setTimeout(() => {
+          el.disabled = false;
+        }, 1000);
+      }
+    };
+    el.addEventListener("click", el.__handleClick__);
+  },
+  beforeUnmount(el: ElType) {
+    el.removeEventListener("click", el.__handleClick__);
+  }
+};
+
+export default throttle;

package/dist/package/src/directives/modules/waterMarker.ts

@@ -0,0 +1,36 @@
+/*
+  需求：给整个页面添加背景水印。
+
+  思路：
+    1、使用 canvas 特性生成 base64 格式的图片文件，设置其字体大小，颜色等。
+    2、将其设置为背景图片，从而实现页面或组件水印效果
+  
+  使用：设置水印文案，颜色，字体大小即可
+  <div v-waterMarker="{text:'版权所有',textColor:'rgba(180, 180, 180, 0.4)'}"></div>
+*/
+
+import type { Directive, DirectiveBinding } from "vue";
+const addWaterMarker: Directive = (str: string, parentNode: any, font: any, textColor: string) => {
+  // 水印文字，父元素，字体，文字颜色
+  let can: HTMLCanvasElement = document.createElement("canvas");
+  parentNode.appendChild(can);
+  can.width = 205;
+  can.height = 140;
+  can.style.display = "none";
+  let cans = can.getContext("2d") as CanvasRenderingContext2D;
+  cans.rotate((-20 * Math.PI) / 180);
+  cans.font = font || "16px Microsoft JhengHei";
+  cans.fillStyle = textColor || "rgba(180, 180, 180, 0.3)";
+  cans.textAlign = "left";
+  cans.textBaseline = "Middle" as CanvasTextBaseline;
+  cans.fillText(str, can.width / 10, can.height / 2);
+  parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
+};
+
+const waterMarker = {
+  mounted(el: DirectiveBinding, binding: DirectiveBinding) {
+    addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor);
+  }
+};
+
+export default waterMarker;

package/dist/package/src/enums/httpEnum.ts

@@ -0,0 +1,35 @@
+/**
+ * @description：请求配置
+ */
+export enum ResultEnum {
+  SUCCESS = 200,
+  ERROR = 500,
+  OVERDUE = 401,
+  TIMEOUT = 30000,
+  TYPE = "success"
+}
+
+/**
+ * @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/dist/package/src/format.ts

@@ -0,0 +1 @@
+export { formatJson, formatSrc } from "./utils/utils";

package/dist/package/src/hooks/interface/index.ts

@@ -0,0 +1,38 @@
+export namespace Table {
+  /** 表格分页状态。 */
+  export interface Pageable {
+    page_num: number;
+    page_size: number;
+    total: number;
+  }
+  /** useTable 维护的表格请求、分页和查询状态。 */
+  export interface StateProps {
+    loading: boolean;
+    tableData: any[];
+    pageable: Pageable;
+    searchParam: {
+      [key: string]: any;
+    };
+    searchInitParam: {
+      [key: string]: any;
+    };
+    totalParam: {
+      [key: string]: any;
+    };
+    icon?: {
+      [key: string]: any;
+    };
+  }
+}
+
+export namespace HandleData {
+  /** Element Plus 消息提示类型。 */
+  export type MessageType = "" | "success" | "warning" | "info" | "error";
+}
+
+export namespace Theme {
+  /** 后台菜单和头部主题类型。 */
+  export type ThemeType = "light" | "inverted" | "dark";
+  /** 灰色模式与色弱模式类型。 */
+  export type GreyOrWeakType = "grey" | "weak";
+}

package/dist/package/src/hooks/useAuthButtons.ts

@@ -0,0 +1,25 @@
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import { useAuthStore } from "../stores/modules/auth";
+
+const GLOBAL_AUTH_BUTTON_KEY = "__global__";
+
+/**
+ * @description 页面按钮权限
+ * */
+export const useAuthButtons = () => {
+  const route = useRoute();
+  const authStore = useAuthStore();
+  const authButtons =
+    authStore.authButtonListGet[route.name as string] || authStore.authButtonListGet[GLOBAL_AUTH_BUTTON_KEY] || [];
+
+  const BUTTONS = computed(() => {
+    let currentPageAuthButton: { [key: string]: boolean } = {};
+    authButtons.forEach(item => (currentPageAuthButton[item] = true));
+    return currentPageAuthButton;
+  });
+
+  return {
+    BUTTONS
+  };
+};

package/dist/package/src/hooks/useDownload.ts

@@ -0,0 +1,44 @@
+import { ElNotification } from "element-plus";
+
+/**
+ * @description 接收数据流生成 blob，创建链接，下载文件
+ * @param {Function} api 导出表格的api方法 (必传)
+ * @param {String} tempName 导出的文件名 (必传)
+ * @param {Object} params 导出的参数 (默认{})
+ * @param {Boolean} isNotify 是否有导出消息提示 (默认为 true)
+ * @param {String} fileType 导出的文件格式 (默认为.xlsx)
+ * */
+export const useDownload = async (
+  api: (param: any) => Promise<any>,
+  tempName: string,
+  params: any = {},
+  isNotify: boolean = true,
+  fileType: string = ".xlsx"
+) => {
+  if (isNotify) {
+    ElNotification({
+      title: "温馨提示",
+      message: "如果数据庞大会导致下载缓慢哦，请您耐心等待！",
+      type: "info",
+      duration: 3000
+    });
+  }
+  try {
+    const res = await api(params);
+    const blob = new Blob([res]);
+    // 兼容 edge 不支持 createObjectURL 方法
+    if ("msSaveOrOpenBlob" in navigator) return window.navigator.msSaveOrOpenBlob(blob, tempName + fileType);
+    const blobUrl = window.URL.createObjectURL(blob);
+    const exportFile = document.createElement("a");
+    exportFile.style.display = "none";
+    exportFile.download = `${tempName}${fileType}`;
+    exportFile.href = blobUrl;
+    document.body.appendChild(exportFile);
+    exportFile.click();
+    // 去除下载对 url 的影响
+    document.body.removeChild(exportFile);
+    window.URL.revokeObjectURL(blobUrl);
+  } catch (error) {
+    console.log(error);
+  }
+};

package/dist/package/src/hooks/useHandleData.ts

@@ -0,0 +1,38 @@
+import { ElMessageBox, ElMessage } from "element-plus";
+import { HandleData } from "./interface";
+
+/**
+ * @description 操作单条数据信息 (二次确认【删除、禁用、启用、重置密码】)
+ * @param {Function} api 操作数据接口的api方法 (必传)
+ * @param {Object} params 携带的操作数据参数 {id,params} (必传)
+ * @param {String} message 提示信息 (必传)
+ * @param {String} confirmType icon类型 (不必传,默认为 warning)
+ * @returns {Promise}
+ */
+export const useHandleData = (
+  api: (params: any) => Promise<any>,
+  params: any = {},
+  message: string,
+  confirmType: HandleData.MessageType = "warning"
+) => {
+  return new Promise((resolve, reject) => {
+    ElMessageBox.confirm(`是否${message}?`, "温馨提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: confirmType,
+      draggable: true
+    })
+      .then(async () => {
+        const res = await api(params);
+        if (!res) return reject(false);
+        ElMessage({
+          type: "success",
+          message: `${message}成功!`
+        });
+        resolve(true);
+      })
+      .catch(() => {
+        // cancel operation
+      });
+  });
+};

package/dist/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/dist/package/src/hooks/useSelection.ts

@@ -0,0 +1,34 @@
+import { ref, computed } from "vue";
+
+/**
+ * @description 表格多选数据操作
+ * @param {String} rowKey 当表格可以多选时，所指定的 id
+ * */
+export const useSelection = (rowKey: string = "id") => {
+  const isSelected = ref<boolean>(false);
+  const selectedList = ref<any[]>([]);
+
+  // 当前选中的所有 ids 数组
+  const selectedListIds = computed((): Array<string | number> => {
+    const ids: Array<string | number> = [];
+    selectedList.value.forEach(item => ids.push(item[rowKey]));
+    return ids;
+  });
+
+  /**
+   * @description 多选操作
+   * @param {Array} rowArr 当前选择的所有数据
+   * @return void
+   */
+  const selectionChange = (rowArr: any[]) => {
+    rowArr.length ? (isSelected.value = true) : (isSelected.value = false);
+    selectedList.value = rowArr;
+  };
+
+  return {
+    isSelected,
+    selectedList,
+    selectedListIds,
+    selectionChange
+  };
+};

package/dist/package/src/hooks/useTable.ts

@@ -0,0 +1,151 @@
+import { Table } from "./interface";
+import { reactive, computed, toRefs } from "vue";
+
+/**
+ * @description table 页面操作方法封装
+ * @param {Function} api 获取表格数据 api 方法 (必传)
+ * @param {Object} initParam 获取数据初始化参数 (非必传，默认为{})
+ * @param {Boolean} isPageable 是否有分页 (非必传，默认为true)
+ * @param {Function} dataCallBack 对后台返回的数据进行处理的方法 (非必传)
+ * */
+export const useTable = (
+  api?: (params: any) => Promise<any>,
+  initParam: object = {},
+  isPageable: boolean = true,
+  dataCallBack?: (data: any) => any,
+  requestError?: (error: any) => void
+) => {
+  const state = reactive<Table.StateProps>({
+    // 表格加载状态
+    loading: false,
+    // 表格数据
+    tableData: [],
+    // 分页数据
+    pageable: {
+      // 当前页数
+      page_num: 1,
+      // 每页显示条数
+      page_size: 10,
+      // 总条数
+      total: 0
+    },
+    // 查询参数(只包括查询)
+    searchParam: {},
+    // 初始化默认的查询参数
+    searchInitParam: {},
+    // 总参数(包含分页和查询参数)
+    totalParam: {}
+  });
+
+  /**
+   * @description 分页查询参数(只包括分页和表格字段排序,其他排序方式可自行配置)
+   * */
+  const pageParam = computed({
+    get: () => {
+      return {
+        page_num: state.pageable.page_num,
+        page_size: state.pageable.page_size
+      };
+    },
+    set: (newVal: any) => {
+      console.log("我是分页更新之后的值", newVal);
+    }
+  });
+
+  /**
+   * @description 获取表格数据
+   * @return void
+   * */
+  const getTableList = async () => {
+    if (!api) return;
+    state.loading = true;
+    try {
+      // 先把初始化参数和分页参数放到总参数里面
+      Object.assign(state.totalParam, initParam, isPageable ? pageParam.value : {});
+      let { data } = await api({ ...state.searchInitParam, ...state.totalParam });
+      dataCallBack && (data = dataCallBack(data));
+      state.tableData = isPageable ? data.list : data;
+      // 解构后台返回的分页数据 (如果有分页更新分页信息)
+      if (isPageable) {
+        // Element Plus 要求分页总数为非负数字，兼容接口未返回总数的情况。
+        const total = Number(data.total ?? 0);
+        state.pageable.total = Number.isFinite(total) && total >= 0 ? total : 0;
+      }
+    } catch (error) {
+      requestError && requestError(error);
+    } finally {
+      state.loading = false;
+    }
+  };
+
+  /**
+   * @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];
+      }
+    }
+    Object.assign(state.totalParam, nowSearchParam);
+  };
+
+  /**
+   * @description 表格数据查询
+   * @return void
+   * */
+  const search = () => {
+    state.pageable.page_num = 1;
+    updatedTotalParam();
+    getTableList();
+  };
+
+  /**
+   * @description 表格数据重置
+   * @return void
+   * */
+  const reset = () => {
+    state.pageable.page_num = 1;
+    // 重置搜索表单的时，如果有默认搜索参数，则重置默认的搜索参数
+    state.searchParam = { ...state.searchInitParam };
+    updatedTotalParam();
+    getTableList();
+  };
+
+  /**
+   * @description 每页条数改变
+   * @param {Number} val 当前条数
+   * @return void
+   * */
+  const handleSizeChange = (val: number) => {
+    state.pageable.page_num = 1;
+    state.pageable.page_size = val;
+    getTableList();
+  };
+
+  /**
+   * @description 当前页改变
+   * @param {Number} val 当前页
+   * @return void
+   * */
+  const handleCurrentChange = (val: number) => {
+    state.pageable.page_num = val;
+    getTableList();
+  };
+
+  return {
+    ...toRefs(state),
+    getTableList,
+    search,
+    reset,
+    handleSizeChange,
+    handleCurrentChange,
+    updatedTotalParam
+  };
+};

package/dist/package/src/hooks/useTheme.ts

@@ -0,0 +1,111 @@
+import { storeToRefs } from "pinia";
+import { Theme } from "./interface";
+import { ElMessage } from "element-plus";
+import { DEFAULT_PRIMARY } from "../config";
+import { useGlobalStore } from "../stores/modules/global";
+import { getLightColor, getDarkColor } from "../utils/color";
+import { menuTheme } from "../styles/theme/menu";
+import { asideTheme } from "../styles/theme/aside";
+import { headerTheme } from "../styles/theme/header";
+
+/**
+ * @description 全局主题 hooks
+ * */
+export const useTheme = () => {
+  const globalStore = useGlobalStore();
+  const { primary, isDark, isGrey, isWeak, layout, asideInverted, headerInverted } = storeToRefs(globalStore);
+
+  // 切换暗黑模式 ==> 同时修改主题颜色、侧边栏、头部颜色
+  const switchDark = () => {
+    const html = document.documentElement as HTMLElement;
+    if (isDark.value) html.setAttribute("class", "dark");
+    else html.setAttribute("class", "");
+    changePrimary(primary.value);
+    setAsideTheme();
+    setHeaderTheme();
+  };
+
+  // 修改主题颜色
+  const changePrimary = (val: string | null) => {
+    if (!val) {
+      val = DEFAULT_PRIMARY;
+      ElMessage({ type: "success", message: `主题颜色已重置为 ${DEFAULT_PRIMARY}` });
+    }
+    // 计算主题颜色变化
+    document.documentElement.style.setProperty("--el-color-primary", val);
+    document.documentElement.style.setProperty(
+      "--el-color-primary-dark-2",
+      isDark.value ? `${getLightColor(val, 0.2)}` : `${getDarkColor(val, 0.3)}`
+    );
+    for (let i = 1; i <= 9; i++) {
+      const primaryColor = isDark.value ? `${getDarkColor(val, i / 10)}` : `${getLightColor(val, i / 10)}`;
+      document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, primaryColor);
+    }
+    globalStore.setGlobalState("primary", val);
+  };
+
+  // 灰色和弱色切换
+  const changeGreyOrWeak = (type: Theme.GreyOrWeakType, value: boolean) => {
+    const body = document.body as HTMLElement;
+    if (!value) return body.removeAttribute("style");
+    const styles: Record<Theme.GreyOrWeakType, string> = {
+      grey: "filter: grayscale(1)",
+      weak: "filter: invert(80%)"
+    };
+    body.setAttribute("style", styles[type]);
+    const propName = type === "grey" ? "isWeak" : "isGrey";
+    globalStore.setGlobalState(propName, false);
+  };
+
+  // 设置菜单样式
+  const setMenuTheme = () => {
+    let type: Theme.ThemeType = "light";
+    if (layout.value === "transverse" && headerInverted.value) type = "inverted";
+    if (layout.value !== "transverse" && asideInverted.value) type = "inverted";
+    if (isDark.value) type = "dark";
+    const theme = menuTheme[type!];
+    for (const [key, value] of Object.entries(theme)) {
+      document.documentElement.style.setProperty(key, value);
+    }
+  };
+
+  // 设置侧边栏样式
+  const setAsideTheme = () => {
+    let type: Theme.ThemeType = "light";
+    if (asideInverted.value) type = "inverted";
+    if (isDark.value) type = "dark";
+    const theme = asideTheme[type!];
+    for (const [key, value] of Object.entries(theme)) {
+      document.documentElement.style.setProperty(key, value);
+    }
+    setMenuTheme();
+  };
+
+  // 设置头部样式
+  const setHeaderTheme = () => {
+    let type: Theme.ThemeType = "light";
+    if (headerInverted.value) type = "inverted";
+    if (isDark.value) type = "dark";
+    const theme = headerTheme[type!];
+    for (const [key, value] of Object.entries(theme)) {
+      document.documentElement.style.setProperty(key, value);
+    }
+    setMenuTheme();
+  };
+
+  // init theme
+  const initTheme = () => {
+    switchDark();
+    if (isGrey.value) changeGreyOrWeak("grey", true);
+    if (isWeak.value) changeGreyOrWeak("weak", true);
+  };
+
+  return {
+    initTheme,
+    switchDark,
+    changePrimary,
+    changeGreyOrWeak,
+    setAsideTheme,
+    setHeaderTheme
+  };
+};