@liujitcn/kratos-admin-core 0.0.1

package/dist/package/src/components/Upload/Imgs.vue

@@ -0,0 +1,320 @@
+<template>
+  <div class="upload-box">
+    <el-upload
+      v-model:file-list="_fileList"
+      action="#"
+      list-type="picture-card"
+      :class="['upload', self_disabled ? 'disabled' : '', drag ? 'no-border' : '']"
+      :multiple="true"
+      :disabled="self_disabled"
+      :limit="limit"
+      :http-request="handleHttpUpload"
+      :before-upload="beforeUpload"
+      :on-exceed="handleExceed"
+      :on-success="uploadSuccess"
+      :on-error="uploadError"
+      :drag="drag"
+      :accept="fileType.join(',')"
+    >
+      <div class="upload-empty">
+        <slot name="empty">
+          <el-icon><Plus /></el-icon>
+          <!-- <span>请上传图片</span> -->
+        </slot>
+      </div>
+      <template #file="{ file }">
+        <img :src="file.url" class="upload-image" />
+        <div class="upload-handle" @click.stop>
+          <div class="handle-icon" @click="handlePictureCardPreview(file)">
+            <el-icon><ZoomIn /></el-icon>
+            <span>查看</span>
+          </div>
+          <div v-if="!self_disabled" class="handle-icon" @click="handleRemove(file)">
+            <el-icon><Delete /></el-icon>
+            <span>删除</span>
+          </div>
+        </div>
+      </template>
+    </el-upload>
+    <div class="el-upload__tip">
+      <slot name="tip"></slot>
+    </div>
+    <el-image-viewer v-if="imgViewVisible" :url-list="[viewImageUrl]" @close="imgViewVisible = false" />
+  </div>
+</template>
+
+<script setup lang="ts" name="UploadImgs">
+import { ref, computed, inject, watch } from "vue";
+import { Plus } from "@element-plus/icons-vue";
+import { defFileService } from "../../api/base/file";
+import type { UploadProps, UploadFile, UploadUserFile, UploadRequestOptions } from "element-plus";
+import { ElNotification, formContextKey, formItemContextKey } from "element-plus";
+import type { FileInfo } from "../../rpc/base/v1/file";
+
+/** 多图上传组件属性。 */
+interface UploadFileProps {
+  fileList: UploadUserFile[];
+  api?: (file: File) => Promise<FileInfo>; // 上传图片的 api 方法，默认使用当前文件服务 ==> 非必传
+  uploadType?: string; // 上传文件业务类型 ==> 非必传（默认为 image）
+  drag?: boolean; // 是否支持拖拽上传 ==> 非必传（默认为 true）
+  disabled?: boolean; // 是否禁用上传组件 ==> 非必传（默认为 false）
+  limit?: number; // 最大图片上传数 ==> 非必传（默认为 5张）
+  fileSize?: number; // 图片大小限制 ==> 非必传（默认为 5M）
+  fileType?: File.ImageMimeType[]; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
+  height?: string; // 组件高度 ==> 非必传（默认为 150px）
+  width?: string; // 组件宽度 ==> 非必传（默认为 150px）
+  borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
+}
+
+const props = withDefaults(defineProps<UploadFileProps>(), {
+  fileList: () => [],
+  uploadType: "image",
+  drag: true,
+  disabled: false,
+  limit: 5,
+  fileSize: 5,
+  fileType: () => ["image/jpeg", "image/png", "image/gif"],
+  height: "150px",
+  width: "150px",
+  borderRadius: "8px"
+});
+
+// 获取 el-form 组件上下文
+const formContext = inject(formContextKey, void 0);
+// 获取 el-form-item 组件上下文
+const formItemContext = inject(formItemContextKey, void 0);
+// 判断是否禁用上传和删除
+const self_disabled = computed(() => {
+  return props.disabled || formContext?.disabled;
+});
+
+const _fileList = ref<UploadUserFile[]>(props.fileList);
+
+// 监听 props.fileList 列表默认值改变
+watch(
+  () => props.fileList,
+  (n: UploadUserFile[]) => {
+    _fileList.value = n;
+  }
+);
+
+/**
+ * @description 文件上传之前判断
+ * @param rawFile 选择的文件
+ * */
+const beforeUpload: UploadProps["beforeUpload"] = rawFile => {
+  const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
+  const imgType = props.fileType.includes(rawFile.type as File.ImageMimeType);
+  if (!imgType)
+    ElNotification({
+      title: "温馨提示",
+      message: "上传图片不符合所需的格式！",
+      type: "warning"
+    });
+  if (!imgSize)
+    setTimeout(() => {
+      ElNotification({
+        title: "温馨提示",
+        message: `上传图片大小不能超过 ${props.fileSize}M！`,
+        type: "warning"
+      });
+    }, 0);
+  return imgType && imgSize;
+};
+
+/**
+ * @description 图片上传
+ * @param options upload 所有配置项
+ * */
+const handleHttpUpload = async (options: UploadRequestOptions) => {
+  try {
+    // 优先使用页面显式传入的业务上传类型，避免不同业务图片都落到同一个 image 分类。
+    const api = props.api ?? (file => defFileService.UploadFile(file, props.uploadType));
+    const data = await api(options.file);
+    options.onSuccess(data);
+  } catch (error) {
+    options.onError(error as any);
+  }
+};
+
+/**
+ * @description 图片上传成功
+ * @param response 上传响应结果
+ * @param uploadFile 上传的文件
+ * */
+const emit = defineEmits<{
+  "update:fileList": [value: UploadUserFile[]];
+}>();
+/** 处理多图上传成功后的地址回填和表单校验。 */
+const uploadSuccess = (response: FileInfo | undefined, uploadFile: UploadFile) => {
+  if (!response) return;
+  uploadFile.url = response.url;
+  emit("update:fileList", _fileList.value);
+  // 调用 el-form 内部的校验方法（可自动校验）
+  formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
+  ElNotification({
+    title: "温馨提示",
+    message: "图片上传成功！",
+    type: "success"
+  });
+};
+
+/**
+ * @description 删除图片
+ * @param file 删除的文件
+ * */
+const handleRemove = (file: UploadFile) => {
+  _fileList.value = _fileList.value.filter(item => item.url !== file.url || item.name !== file.name);
+  emit("update:fileList", _fileList.value);
+};
+
+/**
+ * @description 图片上传错误
+ * */
+const uploadError = () => {
+  ElNotification({
+    title: "温馨提示",
+    message: "图片上传失败，请您重新上传！",
+    type: "error"
+  });
+};
+
+/**
+ * @description 文件数超出
+ * */
+const handleExceed = () => {
+  ElNotification({
+    title: "温馨提示",
+    message: `当前最多只能上传 ${props.limit} 张图片，请移除后上传！`,
+    type: "warning"
+  });
+};
+
+/**
+ * @description 图片预览
+ * @param file 预览的文件
+ * */
+const viewImageUrl = ref("");
+const imgViewVisible = ref(false);
+const handlePictureCardPreview: UploadProps["onPreview"] = file => {
+  viewImageUrl.value = file.url!;
+  imgViewVisible.value = true;
+};
+</script>
+
+<style scoped lang="scss">
+.is-error {
+  .upload {
+    :deep(.el-upload--picture-card),
+    :deep(.el-upload-dragger) {
+      border: 1px dashed var(--el-color-danger) !important;
+      &:hover {
+        border-color: var(--el-color-primary) !important;
+      }
+    }
+  }
+}
+:deep(.disabled) {
+  .el-upload--picture-card,
+  .el-upload-dragger {
+    cursor: not-allowed;
+    background: var(--el-disabled-bg-color) !important;
+    border: 1px dashed var(--el-border-color-darker);
+    &:hover {
+      border-color: var(--el-border-color-darker) !important;
+    }
+  }
+}
+.upload-box {
+  .no-border {
+    :deep(.el-upload--picture-card) {
+      border: none !important;
+    }
+  }
+  :deep(.upload) {
+    .el-upload-dragger {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      overflow: hidden;
+      border: 1px dashed var(--el-border-color-darker);
+      border-radius: v-bind(borderRadius);
+      &:hover {
+        border: 1px dashed var(--el-color-primary);
+      }
+    }
+    .el-upload-dragger.is-dragover {
+      background-color: var(--el-color-primary-light-9);
+      border: 2px dashed var(--el-color-primary) !important;
+    }
+    .el-upload-list__item,
+    .el-upload--picture-card {
+      width: v-bind(width);
+      height: v-bind(height);
+      background-color: transparent;
+      border-radius: v-bind(borderRadius);
+    }
+    .upload-image {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+    .upload-handle {
+      position: absolute;
+      top: 0;
+      right: 0;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      background: rgb(0 0 0 / 60%);
+      opacity: 0;
+      transition: var(--el-transition-duration-fast);
+      .handle-icon {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 0 6%;
+        color: aliceblue;
+        .el-icon {
+          margin-bottom: 15%;
+          font-size: 140%;
+        }
+        span {
+          font-size: 100%;
+        }
+      }
+    }
+    .el-upload-list__item {
+      &:hover {
+        .upload-handle {
+          opacity: 1;
+        }
+      }
+    }
+    .upload-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-size: 12px;
+      line-height: 30px;
+      color: var(--el-color-info);
+      .el-icon {
+        font-size: 28px;
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+  .el-upload__tip {
+    line-height: 15px;
+    text-align: center;
+  }
+}
+</style>

package/dist/package/src/components/WangEditor/index.scss

@@ -0,0 +1,28 @@
+/* 富文本组件校验失败样式 */
+.is-error {
+  .editor-box {
+    border-color: var(--el-color-danger);
+    .editor-toolbar {
+      border-bottom-color: var(--el-color-danger);
+    }
+  }
+}
+
+/* 富文本组件禁用样式 */
+.editor-disabled {
+  cursor: not-allowed !important;
+}
+
+/* 富文本组件样式 */
+.editor-box {
+  /* 防止富文本编辑器全屏时 tabs组件 在其层级之上 */
+  z-index: 2;
+  width: 100%;
+  border: 1px solid var(--el-border-color-darker);
+  .editor-toolbar {
+    border-bottom: 1px solid var(--el-border-color-darker);
+  }
+  .editor-content {
+    overflow-y: hidden;
+  }
+}

package/dist/package/src/components/WangEditor/index.vue

@@ -0,0 +1,154 @@
+<template>
+  <div :class="['editor-box', self_disabled ? 'editor-disabled' : '']">
+    <Toolbar v-if="!hideToolBar" class="editor-toolbar" :editor="editorRef" :default-config="toolbarConfig" :mode="mode" />
+    <Editor
+      v-model="valueHtml"
+      class="editor-content"
+      :style="{ height }"
+      :mode="mode"
+      :default-config="editorConfig"
+      @on-created="handleCreated"
+      @on-blur="handleBlur"
+    />
+  </div>
+</template>
+
+<script setup lang="ts" name="WangEditor">
+import { nextTick, computed, inject, shallowRef, onBeforeUnmount } from "vue";
+import { IToolbarConfig, IEditorConfig } from "@wangeditor/editor";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { defFileService } from "../../api/base/file";
+import "@wangeditor/editor/dist/css/style.css";
+import { formContextKey, formItemContextKey } from "element-plus";
+
+// 富文本 DOM 元素
+const editorRef = shallowRef();
+
+// 实列化编辑器
+const handleCreated = (editor: any) => {
+  editorRef.value = editor;
+};
+
+// 接收父组件参数，并设置默认值
+interface RichEditorProps {
+  value: string; // 富文本值 ==> 必传
+  toolbarConfig?: Partial<IToolbarConfig>; // 工具栏配置 ==> 非必传（默认为空）
+  editorConfig?: Partial<IEditorConfig>; // 编辑器配置 ==> 非必传（默认为空）
+  height?: string; // 富文本高度 ==> 非必传（默认为 500px）
+  mode?: "default" | "simple"; // 富文本模式 ==> 非必传（默认为 default）
+  hideToolBar?: boolean; // 是否隐藏工具栏 ==> 非必传（默认为false）
+  disabled?: boolean; // 是否禁用编辑器 ==> 非必传（默认为false）
+}
+const props = withDefaults(defineProps<RichEditorProps>(), {
+  toolbarConfig: () => {
+    return {
+      excludeKeys: []
+    };
+  },
+  editorConfig: () => {
+    return {
+      placeholder: "请输入内容...",
+      MENU_CONF: {}
+    };
+  },
+  height: "500px",
+  mode: "default",
+  hideToolBar: false,
+  disabled: false
+});
+
+// 获取 el-form 组件上下文
+const formContext = inject(formContextKey, void 0);
+// 获取 el-form-item 组件上下文
+const formItemContext = inject(formItemContextKey, void 0);
+// 判断是否禁用上传和删除
+const self_disabled = computed(() => {
+  return props.disabled || formContext?.disabled;
+});
+
+// 判断当前富文本编辑器是否禁用
+if (self_disabled.value) nextTick(() => editorRef.value.disable());
+
+// 富文本的内容监听，触发父组件改变，实现双向数据绑定
+const emit = defineEmits<{
+  "update:value": [value: string];
+  "check-validate": [];
+}>();
+const valueHtml = computed({
+  get() {
+    return props.value;
+  },
+  set(val: string) {
+    // 防止富文本内容为空时，校验失败
+    if (editorRef.value.isEmpty()) val = "";
+    emit("update:value", val);
+  }
+});
+
+/**
+ * @description 图片自定义上传
+ * @param file 上传的文件
+ * @param insertFn 上传成功后的回调函数（插入到富文本编辑器中）
+ * */
+type InsertFnTypeImg = (url: string, alt?: string, href?: string) => void;
+props.editorConfig.MENU_CONF!["uploadImage"] = {
+  async customUpload(file: File, insertFn: InsertFnTypeImg) {
+    if (!uploadImgValidate(file)) return;
+    try {
+      const data = await defFileService.UploadFile(file, "image");
+      insertFn(data.url);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+};
+
+// 图片上传前判断
+const uploadImgValidate = (file: File): boolean => {
+  console.log(file);
+  return true;
+};
+
+/**
+ * @description 视频自定义上传
+ * @param file 上传的文件
+ * @param insertFn 上传成功后的回调函数（插入到富文本编辑器中）
+ * */
+type InsertFnTypeVideo = (url: string, poster?: string) => void;
+props.editorConfig.MENU_CONF!["uploadVideo"] = {
+  async customUpload(file: File, insertFn: InsertFnTypeVideo) {
+    if (!uploadVideoValidate(file)) return;
+    try {
+      const data = await defFileService.UploadFile(file, "video");
+      insertFn(data.url);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+};
+
+// 视频上传前判断
+const uploadVideoValidate = (file: File): boolean => {
+  console.log(file);
+  return true;
+};
+
+// 编辑框失去焦点时触发
+const handleBlur = () => {
+  formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  if (!editorRef.value) return;
+  editorRef.value.destroy();
+});
+
+defineExpose({
+  editor: editorRef
+});
+</script>
+
+<style scoped lang="scss">
+@use "./index.scss" as *;
+</style>

package/dist/package/src/config/index.ts

@@ -0,0 +1,19 @@
+// ? 全局默认配置项
+
+// 首页地址（默认）
+export const HOME_URL: string = "/dashboard/workspace";
+
+// 登录页地址（默认）
+export const LOGIN_URL: string = "/login";
+
+// 默认主题颜色
+export const DEFAULT_PRIMARY: string = "#009688";
+
+// 路由白名单地址（本地存在的路由 staticRouter.ts 中）
+export const ROUTER_WHITE_LIST: string[] = ["/500"];
+
+// 高德地图 key
+export const AMAP_MAP_KEY: string = "";
+
+// 百度地图 key
+export const BAIDU_MAP_KEY: string = "";

package/dist/package/src/config/nprogress.ts

@@ -0,0 +1,12 @@
+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/dist/package/src/directives/index.ts

@@ -0,0 +1,28 @@
+import { App, Directive } from "vue";
+import auth from "./modules/auth";
+import copy from "./modules/copy";
+import waterMarker from "./modules/waterMarker";
+import draggable from "./modules/draggable";
+import debounce from "./modules/debounce";
+import throttle from "./modules/throttle";
+import longpress from "./modules/longpress";
+
+const directivesList: { [key: string]: Directive } = {
+  hasPerm: auth,
+  copy,
+  waterMarker,
+  draggable,
+  debounce,
+  throttle,
+  longpress
+};
+
+const directives = {
+  install: function (app: App<Element>) {
+    Object.keys(directivesList).forEach(key => {
+      app.directive(key, directivesList[key]);
+    });
+  }
+};
+
+export default directives;

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

@@ -0,0 +1,25 @@
+/**
+ * v-hasPerm
+ * 按钮权限指令
+ */
+import { useAuthStore } from "../../stores/modules/auth";
+import type { Directive, DirectiveBinding } from "vue";
+
+const GLOBAL_AUTH_BUTTON_KEY = "__global__";
+
+const auth: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    const { value } = binding;
+    const authStore = useAuthStore();
+    const currentPageRoles =
+      authStore.authButtonListGet[authStore.routeName] ?? authStore.authButtonListGet[GLOBAL_AUTH_BUTTON_KEY] ?? [];
+    if (value instanceof Array && value.length) {
+      const hasPermission = value.every(item => currentPageRoles.includes(item));
+      if (!hasPermission) el.remove();
+    } else {
+      if (!currentPageRoles.includes(value)) el.remove();
+    }
+  }
+};
+
+export default auth;

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

@@ -0,0 +1,39 @@
+/**
+ * v-copy
+ * 复制某个值至剪贴板
+ * 接收参数：string类型/Ref<string>类型/Reactive<string>类型
+ */
+
+import type { Directive, DirectiveBinding } from "vue";
+import { ElMessage } from "element-plus";
+/** 复制指令绑定后挂载复制内容的元素类型。 */
+interface ElType extends HTMLElement {
+  copyData: string | number;
+}
+const copy: Directive = {
+  mounted(el: ElType, binding: DirectiveBinding) {
+    el.copyData = binding.value;
+    el.addEventListener("click", handleClick);
+  },
+  updated(el: ElType, binding: DirectiveBinding) {
+    el.copyData = binding.value;
+  },
+  beforeUnmount(el: ElType) {
+    el.removeEventListener("click", handleClick);
+  }
+};
+
+/** 处理复制指令点击事件并写入剪贴板。 */
+async function handleClick(this: any) {
+  try {
+    await navigator.clipboard.writeText(this.copyData);
+    ElMessage({
+      type: "success",
+      message: "复制成功"
+    });
+  } catch (err) {
+    console.error("复制操作不被支持或失败: ", err);
+  }
+}
+
+export default copy;

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

@@ -0,0 +1,32 @@
+/**
+ * v-debounce
+ * 按钮防抖指令，可自行扩展至input
+ * 接收参数：function类型
+ */
+import type { Directive, DirectiveBinding } from "vue";
+/** 防抖指令挂载点击处理函数的元素类型。 */
+interface ElType extends HTMLElement {
+  __handleClick__: () => any;
+}
+const debounce: 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) {
+        clearInterval(timer);
+      }
+      timer = setTimeout(() => {
+        binding.value();
+      }, 500);
+    };
+    el.addEventListener("click", el.__handleClick__);
+  },
+  beforeUnmount(el: ElType) {
+    el.removeEventListener("click", el.__handleClick__);
+  }
+};
+
+export default debounce;