@liujitcn/kratos-admin-core 0.0.1

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

@@ -0,0 +1,39 @@
+.icon-box {
+  width: 100%;
+  .el-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    color: var(--el-text-color-regular);
+  }
+  :deep(.el-dialog__body) {
+    padding: 25px 20px 20px;
+    .el-input {
+      margin-bottom: 10px;
+    }
+    .icon-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, 115px);
+      justify-content: space-evenly;
+      max-height: 70vh;
+      .icon-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 42px;
+        padding: 20px 30px;
+        cursor: pointer;
+        transition: all 0.2s;
+        &:hover {
+          transform: scale(1.3);
+        }
+        span {
+          margin-top: 5px;
+          line-height: 20px;
+          text-align: center;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,105 @@
+<template>
+  <div class="icon-box">
+    <el-input
+      ref="inputRef"
+      v-model="valueIcon"
+      v-bind="$attrs"
+      :placeholder="placeholder"
+      :clearable="clearable"
+      @clear="clearIcon"
+      @click="openDialog"
+    >
+      <template #append>
+        <el-button :icon="customIcons[iconValue]" />
+      </template>
+    </el-input>
+    <el-dialog v-model="dialogVisible" :title="placeholder" top="50px" width="66%">
+      <el-input v-model="inputValue" placeholder="搜索图标" size="large" :prefix-icon="Icons.Search" />
+      <el-scrollbar v-if="Object.keys(iconsList).length">
+        <div class="icon-list">
+          <div v-for="item in iconsList" :key="item" class="icon-item" @click="selectIcon(item)">
+            <component :is="item"></component>
+            <span>{{ item.name }}</span>
+          </div>
+        </div>
+      </el-scrollbar>
+      <el-empty v-else description="未搜索到您要找的图标~" />
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts" name="SelectIcon">
+import { ref, computed, watch } from "vue";
+import * as Icons from "@element-plus/icons-vue";
+
+/** 图标选择器组件属性。 */
+interface SelectIconProps {
+  iconValue: string;
+  title?: string;
+  clearable?: boolean;
+  placeholder?: string;
+}
+
+const props = withDefaults(defineProps<SelectIconProps>(), {
+  iconValue: "",
+  title: "请选择图标",
+  clearable: true,
+  placeholder: "请选择图标"
+});
+
+// 重新接收一下，防止打包后 clearable 报错
+const valueIcon = ref(props.iconValue);
+
+/**
+ * 同步外部图标值到组件内部输入框，避免父组件重置后仍显示上次选择结果。
+ */
+watch(
+  () => props.iconValue,
+  value => {
+    valueIcon.value = value ?? "";
+  },
+  { immediate: true }
+);
+
+// open Dialog
+const dialogVisible = ref(false);
+/** 打开图标选择弹窗。 */
+const openDialog = () => (dialogVisible.value = true);
+
+// 选择图标(触发更新父组件数据)
+const emit = defineEmits<{
+  "update:iconValue": [value: string];
+}>();
+/** 选择图标并同步到外部绑定值。 */
+const selectIcon = (item: any) => {
+  dialogVisible.value = false;
+  valueIcon.value = item.name;
+  emit("update:iconValue", item.name);
+  setTimeout(() => inputRef.value.blur(), 0);
+};
+
+// 清空图标
+const inputRef = ref();
+/** 清空当前已选择图标。 */
+const clearIcon = () => {
+  valueIcon.value = "";
+  emit("update:iconValue", "");
+  setTimeout(() => inputRef.value.blur(), 0);
+};
+
+// 监听搜索框值
+const inputValue = ref("");
+const customIcons: { [key: string]: any } = Icons;
+const iconsList = computed((): { [key: string]: any } => {
+  if (!inputValue.value) return Icons;
+  let result: { [key: string]: any } = {};
+  for (const key in customIcons) {
+    if (key.toLowerCase().indexOf(inputValue.value.toLowerCase()) > -1) result[key] = customIcons[key];
+  }
+  return result;
+});
+</script>
+
+<style scoped lang="scss">
+@use "./index.scss" as *;
+</style>

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

@@ -0,0 +1,35 @@
+<template>
+  <svg :style="iconStyle" aria-hidden="true">
+    <use :xlink:href="symbolId" />
+  </svg>
+</template>
+
+<script setup lang="ts" name="SvgIcon">
+import { computed, CSSProperties } from "vue";
+
+/** SvgIcon 组件属性。 */
+interface SvgProps {
+  iconClass: string; // 图标名称
+  prefix?: string; // 图标的前缀 ==> 非必传（默认为"icon"）
+  size?: string | number; // 图标尺寸 ==> 非必传
+  iconStyle?: CSSProperties; // 图标的样式 ==> 非必传
+}
+
+const props = withDefaults(defineProps<SvgProps>(), {
+  prefix: "icon",
+  size: "",
+  iconStyle: () => ({})
+});
+
+const iconStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = { ...props.iconStyle };
+  if (props.size !== "" && props.size !== undefined) {
+    const sizeValue = typeof props.size === "number" ? `${props.size}px` : props.size;
+    style.width = sizeValue;
+    style.height = sizeValue;
+  }
+  return style;
+});
+
+const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
+</script>

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

@@ -0,0 +1,12 @@
+<template>
+  <el-switch v-model="globalStore.isDark" inline-prompt :active-icon="Sunny" :inactive-icon="Moon" @change="switchDark" />
+</template>
+
+<script setup lang="ts" name="SwitchDark">
+import { useTheme } from "../../hooks/useTheme";
+import { useGlobalStore } from "../../stores/modules/global";
+import { Sunny, Moon } from "@element-plus/icons-vue";
+
+const { switchDark } = useTheme();
+const globalStore = useGlobalStore();
+</script>

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

@@ -0,0 +1,44 @@
+.filter {
+  box-sizing: border-box;
+  width: 220px;
+  height: 100%;
+  padding: 18px;
+  margin-right: 10px;
+  .title {
+    margin: 0 0 15px;
+    font-size: 18px;
+    font-weight: bold;
+    color: var(--el-color-info-dark-2);
+    letter-spacing: 0.5px;
+  }
+  .search {
+    display: flex;
+    align-items: center;
+    margin: 0 0 15px;
+    .el-icon {
+      cursor: pointer;
+      transform: rotate(90deg) translateY(-8px);
+    }
+  }
+  .el-scrollbar {
+    :deep(.el-tree) {
+      height: 80%;
+      overflow: auto;
+      .el-tree-node__content {
+        height: 33px;
+      }
+    }
+    :deep(.el-tree--highlight-current) {
+      .el-tree-node.is-current > .el-tree-node__content {
+        background-color: var(--el-color-primary);
+        .el-tree-node__label,
+        .el-tree-node__expand-icon {
+          color: white;
+        }
+        .is-leaf {
+          color: transparent;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,207 @@
+<template>
+  <div class="card filter">
+    <h4 v-if="title" class="title sle">
+      {{ title }}
+    </h4>
+    <div class="search">
+      <el-input v-model="filterText" placeholder="输入关键字进行过滤" clearable />
+      <el-dropdown trigger="click">
+        <el-icon size="20"><More /></el-icon>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-if="!multiple" @click="resetSelected">重置选择</el-dropdown-item>
+            <el-dropdown-item @click="toggleTreeNodes(true)">展开全部</el-dropdown-item>
+            <el-dropdown-item @click="toggleTreeNodes(false)">折叠全部</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+    <el-scrollbar :style="{ height: title ? `calc(100% - 95px)` : `calc(100% - 56px)` }">
+      <el-tree
+        ref="treeRef"
+        :default-expand-all="!lazy"
+        :node-key="id"
+        :data="multiple || !showAll ? treeData : treeAllData"
+        :show-checkbox="multiple"
+        :check-strictly="false"
+        :current-node-key="!multiple ? selected : undefined"
+        :highlight-current="!multiple"
+        :expand-on-click-node="false"
+        :check-on-click-node="multiple"
+        :props="defaultProps"
+        :lazy="lazy"
+        :load="lazy ? loadTreeNode : undefined"
+        :filter-node-method="filterNode"
+        :default-checked-keys="multiple ? selected : []"
+        @node-click="handleNodeClick"
+        @check="handleCheckChange"
+      >
+        <template #default="scope">
+          <span class="el-tree-node__label">
+            <slot :row="scope">
+              {{ scope.node.label }}
+            </slot>
+          </span>
+        </template>
+      </el-tree>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts" name="TreeFilter">
+import { ref, watch, onBeforeMount, nextTick } from "vue";
+import { ElTree } from "element-plus";
+
+// 接收父组件参数并设置默认值
+interface TreeFilterProps {
+  requestApi?: (data?: any) => Promise<any>; // 请求分类数据的 api ==> 非必传
+  data?: { [key: string]: any }[]; // 分类数据，如果有分类数据，则不会执行 api 请求 ==> 非必传
+  title?: string; // treeFilter 标题 ==> 非必传
+  id?: string; // 选择的id ==> 非必传，默认为 “id”
+  label?: string; // 显示的label ==> 非必传，默认为 “label”
+  multiple?: boolean; // 是否为多选 ==> 非必传，默认为 false
+  defaultValue?: any; // 默认选中的值 ==> 非必传
+  showAll?: boolean; // 单选模式下是否展示“全部”节点 ==> 非必传，默认为 true
+  lazy?: boolean; // 是否按节点懒加载子节点
+  parentKey?: string; // 懒加载请求使用的父节点字段
+}
+const props = withDefaults(defineProps<TreeFilterProps>(), {
+  id: "id",
+  label: "label",
+  multiple: false,
+  showAll: true,
+  lazy: false,
+  parentKey: "parent_id"
+});
+
+const defaultProps = {
+  children: "children",
+  label: props.label
+};
+
+const treeRef = ref<InstanceType<typeof ElTree>>();
+const treeData = ref<{ [key: string]: any }[]>([]);
+const treeAllData = ref<{ [key: string]: any }[]>([]);
+
+const selected = ref();
+const setSelected = () => {
+  if (props.multiple) selected.value = Array.isArray(props.defaultValue) ? props.defaultValue : [props.defaultValue];
+  else selected.value = typeof props.defaultValue === "string" && props.defaultValue ? props.defaultValue : undefined;
+};
+
+const normalizeLazyNodes = (nodes: { [key: string]: any }[] = []) =>
+  nodes.map(node => ({
+    ...node,
+    isLeaf: !node.has_children
+  }));
+
+const updateTreeData = (data: { [key: string]: any }[]) => {
+  treeData.value = props.lazy ? normalizeLazyNodes(data) : data;
+  const allNode = { id: "", [props.label]: "全部", isLeaf: true };
+  treeAllData.value = props.showAll ? [allNode, ...treeData.value] : treeData.value;
+};
+
+onBeforeMount(async () => {
+  setSelected();
+  if (props.requestApi) {
+    const requestParams = props.lazy ? { [props.parentKey]: 0, lazy: true } : undefined;
+    const { data } = await props.requestApi(requestParams);
+    updateTreeData(data ?? []);
+  }
+});
+
+const loadTreeNode = async (node: { level: number; data?: { [key: string]: any } }, resolve: (data: { [key: string]: any }[]) => void) => {
+  if (!props.requestApi) {
+    resolve([]);
+    return;
+  }
+  const parentId = node.level === 0 ? 0 : node.data?.[props.id];
+  try {
+    const { data } = await props.requestApi({ [props.parentKey]: parentId, lazy: true });
+    resolve(normalizeLazyNodes(data ?? []));
+  } catch {
+    resolve([]);
+  }
+};
+
+// 使用 nextTick 防止打包后赋值不生效，开发环境是正常的
+watch(
+  () => props.defaultValue,
+  () => nextTick(() => setSelected()),
+  { deep: true, immediate: true }
+);
+
+watch(
+  () => props.data,
+  () => {
+    if (props.data?.length) {
+      updateTreeData(props.data);
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+const filterText = ref("");
+watch(filterText, val => {
+  treeRef.value!.filter(val);
+});
+
+// 过滤
+const filterNode = (value: string, data: { [key: string]: any }, node: any) => {
+  if (!value) return true;
+  let parentNode = node.parent,
+    labels = [node.label],
+    level = 1;
+  while (level < node.level) {
+    labels = [...labels, parentNode.label];
+    parentNode = parentNode.parent;
+    level++;
+  }
+  return labels.some(label => label.indexOf(value) !== -1);
+};
+
+// 切换树节点的展开或折叠状态
+const toggleTreeNodes = (isExpand: boolean) => {
+  let nodes = treeRef.value?.store.nodesMap;
+  if (!nodes) return;
+  for (const node in nodes) {
+    if (nodes.hasOwnProperty(node)) {
+      nodes[node].expanded = isExpand;
+    }
+  }
+};
+
+// emit
+const emit = defineEmits<{
+  change: [value: any];
+}>();
+
+// 单选
+const handleNodeClick = (data: { [key: string]: any }) => {
+  if (props.multiple) return;
+  selected.value = data[props.id];
+  emit("change", data[props.id]);
+};
+
+// 多选
+const handleCheckChange = () => {
+  emit("change", treeRef.value?.getCheckedKeys());
+};
+
+// 重置当前单选树筛选
+const resetSelected = () => {
+  if (props.multiple) return;
+  selected.value = undefined;
+  nextTick(() => {
+    treeRef.value?.setCurrentKey(null);
+  });
+  emit("change", "");
+};
+
+// 暴露给父组件使用
+defineExpose({ treeData, treeAllData, treeRef });
+</script>
+
+<style scoped lang="scss">
+@use "./index.scss" as *;
+</style>

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

@@ -0,0 +1,201 @@
+<template>
+  <div class="upload-file-box">
+    <el-upload
+      action="#"
+      :class="['upload-file', selfDisabled ? 'disabled' : '']"
+      :multiple="false"
+      :disabled="selfDisabled"
+      :show-file-list="false"
+      :http-request="handleHttpUpload"
+      :before-upload="beforeUpload"
+      :on-success="uploadSuccess"
+      :on-error="uploadError"
+      :accept="fileType.join(',')"
+    >
+      <el-button type="primary" :disabled="selfDisabled">上传文件</el-button>
+    </el-upload>
+
+    <div v-if="fileInfo?.url" class="file-card">
+      <div class="file-card__main">
+        <el-icon class="file-card__icon"><Document /></el-icon>
+        <div class="file-card__meta">
+          <div class="file-card__name">{{ fileInfo.name || "未命名文件" }}</div>
+          <div class="file-card__url">{{ fileInfo.url }}</div>
+        </div>
+      </div>
+      <div class="file-card__action">
+        <el-button link type="primary" :icon="Download" @click.stop="handleDownload">下载</el-button>
+        <el-button v-if="!selfDisabled" link type="danger" :icon="Delete" @click.stop="handleDelete">删除</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="UploadFile">
+import { computed, inject } from "vue";
+import { Delete, Document, Download } from "@element-plus/icons-vue";
+import { ElNotification, formContextKey, formItemContextKey } from "element-plus";
+import type { UploadProps, UploadRequestOptions, UploadUserFile } from "element-plus";
+import { defFileService } from "../../api/base/file";
+import type { FileInfo } from "../../rpc/base/v1/file";
+
+/** 单文件上传组件属性。 */
+interface UploadFileProps {
+  fileInfo?: UploadUserFile;
+  api?: (file: File) => Promise<FileInfo>;
+  disabled?: boolean;
+  fileSize?: number;
+  fileType?: string[];
+  uploadType?: string;
+}
+
+const props = withDefaults(defineProps<UploadFileProps>(), {
+  fileInfo: undefined,
+  disabled: false,
+  fileSize: 20,
+  fileType: () => [],
+  uploadType: "file"
+});
+
+const emit = defineEmits<{
+  "update:fileInfo": [value: UploadUserFile | undefined];
+}>();
+
+const formContext = inject(formContextKey, void 0);
+const formItemContext = inject(formItemContextKey, void 0);
+/** Element Plus 上传错误回调要求的错误对象类型。 */
+type UploadRequestError = Parameters<NonNullable<UploadRequestOptions["onError"]>>[0];
+
+/** 兼容 Element Plus 上传组件要求的错误对象结构。 */
+function buildUploadError(error: unknown): UploadRequestError {
+  const uploadError = error instanceof Error ? error : new Error("文件上传失败");
+  return Object.assign(uploadError, {
+    status: 500,
+    method: "POST",
+    url: "#"
+  }) as UploadRequestError;
+}
+
+/** 计算当前组件是否禁用。 */
+const selfDisabled = computed(() => {
+  return props.disabled || formContext?.disabled;
+});
+
+/** 上传前校验文件大小和格式。 */
+const beforeUpload: UploadProps["beforeUpload"] = rawFile => {
+  const fileSizeValid = rawFile.size / 1024 / 1024 < props.fileSize;
+  const fileTypeValid = !props.fileType.length || props.fileType.includes(rawFile.type);
+
+  if (!fileTypeValid) {
+    ElNotification({
+      title: "温馨提示",
+      message: "上传文件不符合所需的格式！",
+      type: "warning"
+    });
+  }
+
+  if (!fileSizeValid) {
+    ElNotification({
+      title: "温馨提示",
+      message: `上传文件大小不能超过 ${props.fileSize}M！`,
+      type: "warning"
+    });
+  }
+
+  return fileSizeValid && fileTypeValid;
+};
+
+/** 执行自定义文件上传。 */
+const handleHttpUpload = async (options: UploadRequestOptions) => {
+  try {
+    const api = props.api ?? (file => defFileService.UploadFile(file, props.uploadType));
+    const data = await api(options.file);
+    options.onSuccess(data);
+  } catch (error) {
+    options.onError(buildUploadError(error));
+  }
+};
+
+/** 处理单文件上传成功后的状态同步。 */
+const uploadSuccess = (response: FileInfo | undefined) => {
+  if (!response) return;
+  emit("update:fileInfo", {
+    name: response.name,
+    url: response.url
+  });
+  formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
+  ElNotification({
+    title: "温馨提示",
+    message: "文件上传成功！",
+    type: "success"
+  });
+};
+
+/** 处理文件上传失败提示。 */
+const uploadError = () => {
+  ElNotification({
+    title: "温馨提示",
+    message: "文件上传失败，请您重新上传！",
+    type: "error"
+  });
+};
+
+/** 删除当前已上传文件。 */
+function handleDelete() {
+  emit("update:fileInfo", undefined);
+  formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
+}
+
+/** 下载当前已上传文件。 */
+async function handleDownload() {
+  if (!props.fileInfo?.url) return;
+  await defFileService.DownloadFile(props.fileInfo.url, props.fileInfo.name ?? "download");
+}
+</script>
+
+<style scoped lang="scss">
+.upload-file-box {
+  width: 100%;
+}
+.file-card {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  margin-top: 12px;
+  background: var(--el-fill-color-light);
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 8px;
+}
+.file-card__main {
+  display: flex;
+  flex: 1;
+  gap: 12px;
+  min-width: 0;
+}
+.file-card__icon {
+  margin-top: 2px;
+  font-size: 18px;
+  color: var(--el-color-primary);
+}
+.file-card__meta {
+  min-width: 0;
+}
+.file-card__name {
+  font-size: 14px;
+  color: var(--el-text-color-primary);
+}
+.file-card__url {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  white-space: nowrap;
+}
+.file-card__action {
+  display: flex;
+  flex-shrink: 0;
+  gap: 8px;
+}
+</style>