qy-better-lib 0.0.1

package/src/shared/request.ts

@@ -0,0 +1,255 @@
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
+import { getToken, removeToken } from "@qy_better_lib/core";
+import { messageAlert } from "@qy_better_lib/pc";
+
+import dayjs from "dayjs";
+import router from "@/router/index";
+
+export type ResponseType = {
+  code: string | number,
+  success: boolean;
+  data?: any | undefined;
+  msg: string;
+  total?: number;
+};
+
+export type RequestOptions = {
+  responseType?:
+  | "arraybuffer"
+  | "blob"
+  | "document"
+  | "json"
+  | "text"
+  | "stream";
+  contentType?: string;
+  // 是否为Basic方式
+  isBasic?: boolean;
+  /**超时时间，默认30S */
+  timeout?: number;
+};
+
+/**
+ * 网络请求
+ * @param contentType 数据类型:默认application/json
+ * @returns
+ */
+function request(option?: RequestOptions): AxiosInstance {
+  const service = axios.create({
+    responseType: option?.responseType,
+    headers: {
+      "Content-Type": option?.contentType || "application/json",
+    },
+    timeout: option?.timeout || 1000 * 30,
+    baseURL: "/",
+    // 请求数据处理
+    transformRequest: [(data, config) => transformRequest(data, config)],
+    transformResponse: [(data, config) => transformResponse(data, config)],
+  });
+
+  // 拦截请求
+  service.interceptors.request.use((config) => {
+    let token = getToken();
+    if (!!token) {
+      config.headers && (config.headers.Authorization = `${token}`);
+    }
+    return config;
+  });
+
+  // 响应前拦截器
+  service.interceptors.response.use(
+    (response) => {
+      const message = responseStatus(response);
+      const responseType = response.headers["content-disposition"];
+      // 下载文件
+      if (responseType && responseType.indexOf("attachment;") > -1) {
+        if (response.data.size === 0) {
+          messageAlert("error", "No Data", false, 2500);
+          return;
+        }
+        return handleDownload(response);
+      }
+      message && messageAlert("error", message, false, 2500);
+      const { code, success, data, msg, total } = response.data;
+      return { success, data, msg, code, total };
+      // 后续方案
+      // return [response.data, true];
+    },
+    (err: any) => {
+      let errmsg = "";
+      if (!err.response) {
+        if (/[timeout of]\s+\d+ms\s+[exceeded]/.test(err.message)) {
+          errmsg = "请求超时，请检查网络";
+        }
+      } else {
+        errmsg = responseStatus(err.response);
+      }
+      errmsg && messageAlert("error", errmsg, false, 2500);
+      // 需要进行异常后续处理的,通过判断返回值为res[1]===false判断
+      return Promise.resolve([errmsg, false]);
+    }
+  );
+  return service;
+}
+
+function transformRequest(data: any, config: any) {
+  if (!data) return data;
+  // 是文件类型，则不做任何处理
+  if (config["Content-Type"] === "multipart/form-data") {
+    return data;
+  }
+  // 时间格式处理
+  return formatDate(data);
+}
+
+function transformResponse(data: any, config: any) {
+  if (data == "" || data == undefined) return data;
+  // 是文件类型，则不做任何处理
+  if (config["Content-Type"] === "multipart/form-data") {
+    return data;
+  }
+  const contentDisposition = config["content-disposition"];
+  if (contentDisposition && contentDisposition.indexOf("attachment;") > -1) {
+    return data;
+  }
+  // 时间格式处理
+  data = data.replace(
+    /[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])T(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d(\.\d{3})?/g, //\+\d{4}
+    (math) => {
+      return dayjs(math).format("YYYY-MM-DD HH:mm:ss");
+    }
+  );
+  data = JSON.parse(data);
+  return data;
+}
+
+/**
+ * 默认时区处理
+ */
+function formatDate(data: any): any {
+  Date.prototype.toJSON = function () {
+    return dayjs(this).format("YYYY-MM-DD HH:mm:ss");
+  };
+  data = JSON.stringify(data);
+  return data;
+}
+
+/**
+ * 处理文件下载请求
+ * @param response
+ * @returns
+ */
+function handleDownload(response: AxiosResponse<any>) {
+  //如果返回的是application/json，则表示返回的是json，没有要下载的问题，可能是逻辑处理失败
+  if (String(response.headers) === "application/json") {
+    var reader = new FileReader();
+    reader.onload = (e: any) => {
+      var data = JSON.parse(e.target.result);
+      if (data.code === 1) {
+        return data.data;
+      } else {
+        messageAlert("error", data.msg, false, 2500);
+        return null;
+      }
+    };
+    reader.readAsText(response.data);
+    return;
+  }
+  const blob = new Blob([response.data]);
+  const url: string = window.URL.createObjectURL(blob);
+
+  // 如果是预览直接返�
+  if (response.config?.headers?.preview) return url;
+
+  let fileName = "";
+  // 如果响应头包�content-disposition'属性，则从该属性中获取文件名称
+  let cd = response.headers["content-disposition"];
+  if (cd) {
+    fileName = decodeURI(cd.split("filename=")[1]);
+  }
+
+  //如果文件名不存在，则使用时间�
+  if (!fileName) {
+    fileName = new Date().getTime().toString();
+  }
+
+  fileName = fileName.replace(/(.*_)(\d+)(\.\w+)/, (context, $1, $2, $3) => {
+    let str = dayjs(+$2).format("YYYYMMDDHHmmss");
+    return `${$1}${str}${$3}`;
+  });
+
+  //通过模拟a标签点击事件下载文件
+  const link = document.createElement("a");
+  link.href = url;
+  link.setAttribute("download", fileName);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  return { code: 200 };
+}
+
+/**
+ * 用户失效
+ */
+function userInvalid(response: AxiosResponse): string {
+  removeToken();
+  const currentPath = router.currentRoute.value.fullPath;
+  if (router.currentRoute.value.path !== "/login") {
+    const redirect = currentPath === "/login" ? undefined : currentPath;
+    router.replace({
+      path: `/login`,
+      query: { redirect: redirect && encodeURIComponent(redirect) },
+    });
+    return "登录信息已失效，请重新登录";
+  }
+  return "";
+}
+
+/**http状态码异常 */
+function responseStatus(response: AxiosResponse): string {
+  const status = response.status;
+
+  let message: string = "";
+  switch (status) {
+    case 404:
+      message = "数据接口异常";
+      break;
+    case 401:
+      message = userInvalid(response);
+      break;
+    case 400:
+      message = response.data?.msg || "参数错误";
+      break;
+    case 500:
+      message = response.data?.msg || "服务异常,请重试";
+      break;
+    case 200:
+      message = responseSuccess(response);
+      break;
+  }
+  return message;
+}
+
+/**
+ * 响应成功code异常
+ */
+function responseSuccess(response: AxiosResponse): string {
+  const { code, msg } = response.data;
+  switch (code) {
+    case 0:
+      return msg || "服务异常";
+    case 401:
+      return userInvalid(response);
+    case 500:
+      return msg || "服务异常";
+    case -1:
+      return msg || "服务异常";
+    case 200:
+      return "";
+    case 203:
+      return msg || "服务异常";
+    default:
+      return "";
+  }
+}
+
+export default request;

package/src/shared/type.ts

@@ -0,0 +1,48 @@
+import type { Ref, WritableComputedRef } from "vue";
+
+export type { TableProp, TableColumn } from "@qy_better_lib/pc";
+
+/**
+ * 无返回函数
+ */
+export type Fn = () => void;
+
+export type Fnps = (...args) => void;
+
+export type noop = () => {};
+
+export type MenuLayout = {
+  /**菜单列表 */
+  menus: any[];
+  /**当前页面路径 */
+  paths: Record<string, any>;
+  /**选择的菜单key */
+  activeMenu?: Record<string, any>;
+};
+
+/**Layout State */
+export type LayoutState = {
+  /**菜单展开状态 */
+  menuExpand: WritableComputedRef<boolean>;
+  /**页面选项卡 */
+  pageTabList: Ref<any[]>;
+};
+
+export type Locale = "zh-cn" | "en";
+
+/**
+ * 表单配置
+ */
+export type FormOption = {
+  /**是否显示 */
+  visible: boolean,
+  /**key-唯一标识 */
+  key?: string | number,
+  /**其他数据 */
+  [key: string]: any;
+}
+
+export type PageProvide = {
+  on_search: () => any,
+  [key: string]: any
+}

package/src/shared/utils/date.ts

@@ -0,0 +1,83 @@
+import dayjs from "dayjs";
+
+/**
+ * 获取一小时内的范围时间
+ * @export
+ * @return {*}
+ */
+export function getNowHourDateTime(): [string, string] {
+  const before = dayjs(+new Date() - 1000 * 60 * 60).format(
+    "YYYY-MM-DD HH:mm:ss"
+  );
+  return [before, dayjs().format("YYYY-MM-DD HH:mm:ss")];
+}
+
+/**
+ * 获取当日范围时间
+ * @export
+ * @return {*}
+ */
+export function getNowDayDateTime(): [string, string] {
+  return [
+    dayjs().format("YYYY-MM-DD 00:00:00"),
+    dayjs().format("YYYY-MM-DD 23:59:59"),
+  ];
+}
+/**
+ * 获取本周的时间范围
+ * @export
+ * @return {*}
+ */
+export function getWeekDateTime(): [string, string] {
+  const nowDate = new Date();
+  const before =
+    +new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate()) -
+    nowDate.getDay() * 24 * 60 * 60 * 1000;
+  return [
+    dayjs(before).format("YYYY-MM-DD 00:00:00"),
+    dayjs().format("YYYY-MM-DD 23:59:59"),
+  ];
+}
+
+/**
+ * 获取本月的时间范围
+ * @export
+ * @return {*}
+ */
+export function getMonthDateTime(): [string, string] {
+  const nowDate = new Date();
+  const before = +new Date(nowDate.getFullYear(), nowDate.getMonth(), 1);
+  return [
+    dayjs(before).format("YYYY-MM-DD HH:mm:ss"),
+    dayjs().format("YYYY-MM-DD HH:mm:ss"),
+  ];
+}
+
+/**
+ * 获取本季度的时间范围
+ * @export
+ * @return {*}
+ */
+export function getQuarterDateTime(): [string, string] {
+  const nowDate = new Date();
+  const quarter = Math.ceil((nowDate.getMonth() + 1) / 3);
+  const before = new Date(nowDate.getFullYear(), (quarter - 1) * 3, 1);
+  return [
+    dayjs(before).format("YYYY-MM-DD HH:mm:ss"),
+    dayjs().format("YYYY-MM-DD HH:mm:ss"),
+  ];
+}
+
+/**
+ * 获取本年的时间范围
+ * @export
+ * @return {*} 
+ */
+export function getYearDateTime(): [string, string] {
+  const nowDate = new Date();
+  const before = new Date(nowDate.getFullYear(), 0, 1);
+  return [
+    dayjs(before).format("YYYY-MM-DD HH:mm:ss"),
+    dayjs().format("YYYY-MM-DD HH:mm:ss"),
+  ];
+}

package/src/shared/utils/utils.ts

@@ -0,0 +1,85 @@
+import { isObject } from "@qy_better_lib/core";
+import md5 from "crypto-js/md5";
+/**
+ * 获取图片路径
+ * @param fileName 
+ * @returns 
+ */
+export function getImageUrl(fileName: string) {
+  return new URL(`/src/assets/images/${fileName}`, import.meta.url).href;
+}
+/**
+ * 将file转换成base64
+ * @param file 
+ * @param callback 
+ * @returns 
+ */
+export async function file_to_base64(file) {
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  return new Promise((resolve, reject) => {
+    reader.onload = (event) => {
+      return resolve(event.target?.result);
+    };
+
+    // 当出现错误时触发
+    reader.onerror = (error) => {
+      console.error('Error: ', error);
+      return reject(false);
+    };
+  });
+}
+/**
+ * MD5加密
+ * @param str 
+ * @returns 
+ */
+export function encrypt_md5(str: string) {
+  return md5(str).toString().toLowerCase()
+}
+
+export function download_file_for_url(url: string) {
+  const link = document.createElement("a");
+  link.href = url;
+  link.target = "_blank";
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+/**是否为手机号 */
+export function is_mobile(str: string) {
+  const regex = /^1[3-9]\d{9}$/;
+  return regex.test(str);
+}
+/**
+ * 前置数组
+ * @param parent 
+ * @param child 
+ */
+export function pre_child_array(parent: any[], child: any[], key: string) {
+  // 创建一个标记数组，初始化为false
+  let ishas = new Array(parent.length).fill(false);
+  for (let i = 0; i < parent.length; i++) {
+    if (child.some(s => {
+      if (!isObject(s)) {
+        return s === parent[i][key];
+      } else {
+        return s[key] === parent[i][key];
+      }
+    })) {
+      ishas[i] = true;
+    }
+  }
+  let Elements: any[] = [];
+  let nonElements: any[] = [];
+
+  for (let i = 0; i < parent.length; i++) {
+    if (ishas[i]) {
+      Elements.push(parent[i]);
+    } else {
+      nonElements.push(parent[i]);
+    }
+  }
+  const arr = Elements.concat(nonElements);
+  return arr;
+}

package/src/store/index.ts

@@ -0,0 +1,22 @@
+import app, { AppStore } from "./modules/app";
+import shared, { SharedStateStore } from "./modules/shared";
+
+interface Stores {
+  app: AppStore;
+  shared: SharedStateStore;
+}
+
+const store: Stores = {
+  app: {} as AppStore,
+  shared: {} as SharedStateStore,
+};
+
+/**
+ * 注册状态库
+ */
+export const registerStore = () => {
+  store.app = app();
+  store.shared = shared();
+};
+
+export default store;

package/src/store/modules/app.ts

@@ -0,0 +1,17 @@
+import { defineStore } from "pinia";
+
+interface AppState {
+  /**路由页面是否显示 */
+  routeViewDisplay: boolean;
+}
+export type AppStore = {
+  state: AppState;
+};
+
+export default defineStore("appStore", () => {
+  const state = reactive<AppState>({
+    routeViewDisplay: true,
+  });
+
+  return { state };
+});

package/src/store/modules/shared.ts

@@ -0,0 +1,21 @@
+import { defineStore } from "pinia";
+/**
+ * 用户状态
+ */
+
+interface State {
+  resources?: Record<string, any>;
+  isSuper?: boolean;
+}
+export type SharedStateStore = {
+  state: State;
+};
+
+export default defineStore("sharedStore", () => {
+  const state = reactive<State>({
+    resources: [],
+    isSuper: false,
+  });
+
+  return { state };
+});

package/src/styles/index.scss

@@ -0,0 +1,169 @@
+html,
+body {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  color: var(--text-color);
+  font-size: 14px;
+  font-weight: 400;
+  font-family: "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif";
+}
+
+#app {
+  height: 100%;
+  padding: var(--page-padding);
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+a:focus,
+a:active {
+  outline: none;
+  text-decoration: none;
+}
+
+a:link {
+  text-decoration: none;
+}
+
+a,
+abbr,
+acronym,
+address,
+applet,
+article,
+aside,
+audio,
+b,
+big,
+blockquote,
+body,
+canvas,
+caption,
+center,
+cite,
+code,
+dd,
+del,
+details,
+dfn,
+div,
+dl,
+dt,
+em,
+embed,
+fieldset,
+figcaption,
+figure,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+html,
+i,
+iframe,
+img,
+input,
+ins,
+kbd,
+label,
+legend,
+li,
+mark,
+menu,
+nav,
+object,
+ol,
+output,
+p,
+pre,
+q,
+ruby,
+s,
+samp,
+section,
+small,
+span,
+strike,
+strong,
+sub,
+summary,
+table,
+tbody,
+td,
+tfoot,
+time,
+tr,
+tt,
+u,
+ul,
+var,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  vertical-align: baseline;
+}
+
+li {
+  list-style: none;
+}
+
+:root {
+  --text-color: #333333;
+  --text-color-light1: #666666;
+  --text-color-light2: #999999;
+  --text-color-light3: #a0a1a7;
+  --background-color-inverse: #ffffff;
+  --background-color-light1: #f2f3f5;
+  --background-color: #efefef;
+  --border-color: #e4e6ec;
+}
+
+/* Element Plus 暗黑模式变量 */
+html.dark {
+  --el-color-primary: #409eff;
+  --el-color-success: #67c23a;
+  --el-color-warning: #e6a23c;
+  --el-color-danger: #f56c6c;
+  --el-color-info: #909399;
+  --el-bg-color: #1f1f1f;
+  --el-bg-color-page: #121212;
+  --el-bg-color-overlay: #282828;
+  --el-text-color-primary: #ffffff;
+  --el-text-color-regular: #e0e0e0;
+  --el-text-color-secondary: #b0b0b0;
+  --el-text-color-placeholder: #909090;
+  --el-border-color: #434343;
+  --el-border-color-light: #303030;
+  --el-border-color-lighter: #262626;
+  --el-border-color-extra-light: #1f1f1f;
+  --el-fill-color: #2a2a2a;
+  --el-fill-color-light: #303030;
+  --el-fill-color-lighter: #393939;
+  --el-fill-color-blank: transparent;
+  --el-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+  --el-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  --el-box-shadow-lighter: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+  --el-box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
+  
+  /* 项目变量 */
+  --text-color: #ffffff;
+  --text-color-light1: #e0e0e0;
+  --text-color-light2: #b0b0b0;
+  --text-color-light3: #909090;
+  --background-color-inverse: #2a2a2a;
+  --background-color-light1: #303030;
+  --background-color: #1f1f1f;
+  --border-color: #434343;
+}