easy-elplus 1.0.1 → 1.2.0

package/internal/build/package.json

@@ -1,23 +0,0 @@
-{
-  "name": "build",
-  "version": "1.0.0",
-  "description": "",
-  "type": "module",
-  "main": "index.js",
-  "scripts": {
-    "build": "gulp -f gulpfile.js"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "packageManager": "pnpm@10.28.2",
-  "devDependencies": {
-    "@rollup/plugin-node-resolve": "^16.0.3",
-    "@vitejs/plugin-vue": "^6.0.4",
-    "fast-glob": "^3.3.3",
-    "rollup": "^4.57.1",
-    "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.97.3",
-    "gulp": "^5.0.1"
-  }
-}

package/internal/eslint-config/index.js

@@ -1,35 +0,0 @@
-import js from "@eslint/js" //js规范（标准的）
-import globals from "globals" //环境
-import pluginVue from "eslint-plugin-vue" //vue规范
-import pluginCypress from "eslint-plugin-cypress"
-import eslintConfigPrettier from "eslint-config-prettier" // prettier
-const ignores = ["node_modules", "dist", "pnpm-lock.yaml", "docs/.vitepress/cache/*", "docs/.vitepress/dist/*", "!.*"]
-export default [
-  // 1. 全局忽略
-  {
-    ignores
-  },
-  // 2. 继承各个插件的推荐配置 (它们是独立的配置对象)
-  js.configs.recommended, // JS 推荐规范
-  ...pluginVue.configs["flat/essential"], // Vue 规范
-  pluginCypress.configs.recommended, // Cypress 规范
-
-  // 3. 自定义全局设置
-  {
-    files: ["**/*.{js,mjs,cjs,vue}"], // 匹配文件
-    // 全局变量 window
-    languageOptions: {
-      globals: {
-        ...globals.browser,
-        ...globals.node
-      }
-    },
-    rules: {
-      "vue/multi-word-component-names": "off", // 允许单字组件
-      "vue/prefer-import-from-vue": "off" // 允许直接引入
-    }
-  },
-
-  // 4. Prettier 必须放在最后以覆盖冲突规则
-  eslintConfigPrettier
-]

package/internal/eslint-config/package.json

@@ -1,21 +0,0 @@
-{
-  "name": "@easy-elplus/eslint-config",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "type": "module",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "packageManager": "pnpm@10.28.2",
-  "devDependencies": {
-    "@eslint/js": "^9.39.2",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-cypress": "^5.2.1",
-    "eslint-plugin-vue": "^10.7.0",
-    "globals": "^17.3.0"
-  }
-}

package/packages/components/FileUpload/index.js

@@ -1,8 +0,0 @@
-import { withInstall } from "@easy-elplus/utils"
-import FileUpload from "./src/FileUpload.vue"
-
-export const EasyFileUpload = withInstall(FileUpload)
-
-export default EasyFileUpload
-
-export * from "./src/FileUpload.vue"

package/packages/components/FileUpload/src/FileUpload.vue

@@ -1,308 +0,0 @@
-<template>
-  <div class="component-upload-file">
-    <el-upload
-      ref="fileUploadRef"
-      multiple
-      :action="action"
-      :before-upload="handleBeforeUpload"
-      :file-list="fileList"
-      :limit="limit"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      :on-success="handleUploadSuccess"
-      :on-remove="handleRemove"
-      :show-file-list="false"
-      :headers="headers"
-      class="upload-file-uploader"
-    >
-      <!-- 上传按钮 -->
-      <el-button type="primary">
-        <el-icon class="el-icon--left"><Upload /></el-icon>
-        选取文件
-      </el-button>
-    </el-upload>
-
-    <!-- 上传提示 -->
-    <div v-if="showTip" class="el-upload__tip">
-      请上传
-      <template v-if="fileSize">
-        大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
-      </template>
-      <template v-if="fileType && fileType.length">
-        格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
-      </template>
-      的文件
-    </div>
-
-    <!-- 文件列表 -->
-    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
-      <li
-        v-for="(file, index) in fileList"
-        :key="file.uid || index"
-        class="el-upload-list__item ele-upload-list__item-content"
-      >
-        <el-link :href="getFileUrl(file.url)" underline="never" target="_blank">
-          <el-icon class="el-icon--left"><Document /></el-icon>
-          <span>{{ getFileName(file.name) }}</span>
-        </el-link>
-        <div class="ele-upload-list__item-content-action">
-          <el-link underline="never" @click="handleDelete(index)" type="danger">删除</el-link>
-        </div>
-      </li>
-    </transition-group>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch } from "vue"
-import { ElMessage } from "element-plus"
-import { Upload, Document } from "@element-plus/icons-vue"
-import { isString } from "@easy-elplus/utils"
-import { UPDATE_MODEL_EVENT } from "@easy-elplus/constants"
-
-defineOptions({ name: "EasyFileUpload" })
-
-const props = defineProps({
-  modelValue: [String, Object, Array],
-  // 数量限制
-  limit: {
-    type: Number,
-    default: 5
-  },
-  // 大小限制(MB)
-  fileSize: {
-    type: Number,
-    default: 5
-  },
-  // 文件类型, 例如['doc', 'xls', 'ppt', 'txt', 'pdf']
-  fileType: {
-    type: Array,
-    default: () => ["doc", "xls", "ppt", "txt", "pdf"]
-  },
-  // 是否显示提示
-  isShowTip: {
-    type: Boolean,
-    default: true
-  },
-  // 上传地址
-  action: {
-    type: String,
-    required: true
-  },
-  // 请求头
-  headers: {
-    type: Object,
-    default: () => ({})
-  },
-  // 基础路径
-  baseUrl: {
-    type: String,
-    default: ""
-  },
-  // 自定义成功校验函数
-  checkSuccess: {
-    type: Function,
-    default: res => res.code === 200 || res.success === true
-  },
-  // 自定义提取文件地址的路径，支持 "data.url" 这种深层嵌套
-  responsePath: {
-    type: String,
-    default: "data"
-  },
-  // 错误消息提取字段
-  errorField: {
-    type: String,
-    default: "msg"
-  }
-})
-
-const emit = defineEmits([UPDATE_MODEL_EVENT])
-
-const number = ref(0)
-const uploadList = ref([])
-const fileList = ref([])
-const fileUploadRef = ref(null)
-
-const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize))
-
-// 深度解析对象属性 (例如把 res["data.url"] 转为 res.data.url)
-const getDeepValue = (obj, path) => {
-  if (!path) return obj
-  return path.split(".").reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : undefined), obj)
-}
-
-watch(
-  () => props.modelValue,
-  val => {
-    if (val) {
-      const list = Array.isArray(val) ? val : val.split(",")
-      fileList.value = list.map((item, index) => {
-        if (isString(item)) {
-          item = { name: getFileName(item), url: item, uid: new Date().getTime() + index }
-        }
-        return item
-      })
-    } else {
-      fileList.value = []
-    }
-  },
-  { deep: true, immediate: true }
-)
-
-// 上传前校检格式和大小
-function handleBeforeUpload(file) {
-  // 校检文件类型
-  if (props.fileType && props.fileType.length) {
-    const fileName = file.name.split(".")
-    const fileExt = fileName[fileName.length - 1].toLowerCase()
-    const isTypeOk = props.fileType.map(t => t.toLowerCase()).includes(fileExt)
-    if (!isTypeOk) {
-      ElMessage.error(`文件格式不正确, 请上传${props.fileType.join("/")}格式文件!`)
-      return false
-    }
-  }
-  // 校检文件大小
-  if (props.fileSize && file.size / 1024 / 1024 > props.fileSize) {
-    ElMessage.error(`上传文件大小不能超过 ${props.fileSize} MB!`)
-    return false
-  }
-  number.value++
-  return true
-}
-
-// 文件个数超出
-function handleExceed() {
-  ElMessage.error(`上传文件数量不能超过 ${props.limit} 个!`)
-}
-
-// 上传失败
-function handleUploadError(err) {
-  number.value--
-  ElMessage.error(isString(err) ? err : "上传文件失败")
-}
-
-// 上传成功回调
-function handleUploadSuccess(res, file) {
-  // 使用传入的校验函数
-  if (props.checkSuccess(res)) {
-    // 动态提取 URL
-    const url = getDeepValue(res, props.responsePath)
-
-    if (url) {
-      uploadList.value.push({ name: getFileName(url), url: url, uid: file.uid })
-      uploadedSuccessfully()
-    } else {
-      handleUploadError(`无法从响应中解析文件路径: ${props.responsePath}`)
-    }
-  } else {
-    number.value--
-    const errorMsg = getDeepValue(res, props.errorField) || "上传失败"
-    ElMessage.error(errorMsg)
-    fileUploadRef.value?.handleRemove(file)
-    uploadedSuccessfully()
-  }
-}
-
-// 删除文件
-function handleDelete(index) {
-  fileList.value.splice(index, 1)
-  emit(UPDATE_MODEL_EVENT, listToString(fileList.value))
-}
-
-// 移除文件
-function handleRemove(file) {
-  const findex = fileList.value.findIndex(f => f.uid === file.uid)
-  if (findex > -1) {
-    fileList.value.splice(findex, 1)
-    emit(UPDATE_MODEL_EVENT, listToString(fileList.value))
-  }
-}
-
-// 上传结束处理
-function uploadedSuccessfully() {
-  if (number.value > 0 && uploadList.value.length === number.value) {
-    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value)
-    uploadList.value = []
-    number.value = 0
-    emit(UPDATE_MODEL_EVENT, listToString(fileList.value))
-  }
-}
-
-// 获取文件名称
-function getFileName(name) {
-  if (!isString(name)) return ""
-  return name.slice(name.lastIndexOf("/") + 1)
-}
-
-// 获取文件完整 URL
-function getFileUrl(url) {
-  if (!url) return ""
-  if (/^https?:\/\//.test(url)) return url
-  return props.baseUrl ? props.baseUrl + url : url
-}
-
-// 对象转成指定字符串分隔
-function listToString(list, separator = ",") {
-  return list
-    .filter(item => item.url && item.url.indexOf("blob:") !== 0)
-    .map(item => {
-      let url = item.url
-      // 如果设置了 baseUrl，保存时去除它
-      if (props.baseUrl && url.indexOf(props.baseUrl) === 0) {
-        url = url.replace(props.baseUrl, "")
-      }
-      return url
-    })
-    .join(separator)
-}
-</script>
-
-<style scoped lang="scss">
-.component-upload-file {
-  .upload-file-uploader {
-    margin-bottom: 5px;
-  }
-
-  .el-upload__tip {
-    font-size: 12px;
-    color: #606266;
-    margin-top: 7px;
-  }
-
-  .upload-file-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-
-    .el-upload-list__item {
-      border: 1px solid #e4e7ed;
-      line-height: 2;
-      margin-bottom: 10px;
-      position: relative;
-      border-radius: 4px;
-      padding: 8px 10px;
-      transition: all 0.3s;
-
-      &:hover {
-        background-color: #f5f7fa;
-      }
-    }
-
-    .ele-upload-list__item-content {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      color: inherit;
-
-      .el-link {
-        flex: 1;
-        margin-right: 10px;
-      }
-    }
-
-    .ele-upload-list__item-content-action .el-link {
-      margin-right: 10px;
-    }
-  }
-}
-</style>

package/packages/components/ImageUpload/index.js

@@ -1,8 +0,0 @@
-import { withInstall } from "@easy-elplus/utils"
-import ImageUpload from "./src/ImageUpload.vue"
-
-export const EasyImageUpload = withInstall(ImageUpload)
-
-export default EasyImageUpload
-
-export * from "./src/ImageUpload.vue"

package/packages/components/ImageUpload/src/ImageUpload.vue

@@ -1,221 +0,0 @@
-<template>
-  <div class="component-upload-image">
-    <el-upload
-      ref="imageUploadRef"
-      multiple
-      :action="action"
-      list-type="picture-card"
-      :on-success="handleUploadSuccess"
-      :before-upload="handleBeforeUpload"
-      :limit="limit"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      :on-remove="handleRemove"
-      :show-file-list="true"
-      :headers="headers"
-      :file-list="fileList"
-      :on-preview="handlePictureCardPreview"
-      :class="{ hide: fileList.length >= limit }"
-    >
-      <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
-    </el-upload>
-
-    <div v-if="showTip" class="el-upload__tip">
-      请上传
-      <template v-if="fileSize">
-        大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
-      </template>
-      <template v-if="fileType">
-        格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
-      </template>
-      的文件
-    </div>
-
-    <el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
-      <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
-    </el-dialog>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch } from "vue"
-import { ElMessage } from "element-plus"
-import { Plus } from "@element-plus/icons-vue"
-import { isString } from "@easy-elplus/utils"
-import { UPDATE_MODEL_EVENT } from "@easy-elplus/constants"
-
-defineOptions({ name: "EasyImageUpload" })
-
-const props = defineProps({
-  modelValue: [String, Object, Array],
-  limit: { type: Number, default: 5 },
-  fileSize: { type: Number, default: 5 },
-  fileType: { type: Array, default: () => ["png", "jpg", "jpeg"] },
-  isShowTip: { type: Boolean, default: true },
-  action: { type: String, required: true },
-  headers: { type: Object, default: () => ({}) },
-  baseUrl: { type: String, default: "" },
-
-  checkSuccess: {
-    type: Function,
-    default: res => res.code === 200 || res.success === true
-  },
-  // 自定义提取图片地址的路径，支持 "data.url" 这种深层嵌套
-  responsePath: {
-    type: String,
-    default: "data"
-  },
-  // 错误消息提取字段
-  errorField: {
-    type: String,
-    default: "msg"
-  }
-})
-
-const emit = defineEmits([UPDATE_MODEL_EVENT])
-
-const number = ref(0)
-const uploadList = ref([])
-const dialogImageUrl = ref("")
-const dialogVisible = ref(false)
-const fileList = ref([])
-const imageUploadRef = ref(null)
-
-const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize))
-
-// 深度解析对象属性 (例如把 res["data.imgUrl"] 转为 res.data.imgUrl)
-const getDeepValue = (obj, path) => {
-  if (!path) return obj
-  return path.split(".").reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : undefined), obj)
-}
-
-watch(
-  () => props.modelValue,
-  val => {
-    if (val) {
-      const list = Array.isArray(val) ? val : val.split(",")
-      fileList.value = list.map(item => {
-        if (isString(item)) {
-          let url = item
-          if (!/^https?:\/\//.test(url) && props.baseUrl) {
-            url = props.baseUrl + item
-          }
-          item = { name: getFileName(item), url: url }
-        }
-        return item
-      })
-    } else {
-      fileList.value = []
-    }
-  },
-  { deep: true, immediate: true }
-)
-
-function handleBeforeUpload(file) {
-  let isImg = false
-  if (props.fileType.length) {
-    const fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1).toLowerCase()
-    isImg = props.fileType.map(t => t.toLowerCase()).includes(fileExtension)
-  } else {
-    isImg = file.type.indexOf("image") > -1
-  }
-
-  if (!isImg) {
-    ElMessage.error(`格式不正确, 请上传${props.fileType.join("/")}图片!`)
-    return false
-  }
-  if (props.fileSize && file.size / 1024 / 1024 > props.fileSize) {
-    ElMessage.error(`大小不能超过 ${props.fileSize} MB!`)
-    return false
-  }
-  number.value++
-  return true
-}
-
-function handleExceed() {
-  ElMessage.error(`上传数量不能超过 ${props.limit} 个!`)
-}
-
-// 修改后的核心逻辑
-function handleUploadSuccess(res, file) {
-  // 1. 使用传入的校验函数
-  if (props.checkSuccess(res)) {
-    // 2. 动态提取 URL
-    const url = getDeepValue(res, props.responsePath)
-
-    if (url) {
-      uploadList.value.push({ name: getFileName(url), url: url })
-      uploadedSuccessfully()
-    } else {
-      handleUploadError(`无法从响应中解析图片路径: ${props.responsePath}`)
-    }
-  } else {
-    number.value--
-    const errorMsg = getDeepValue(res, props.errorField) || "上传失败"
-    ElMessage.error(errorMsg)
-    imageUploadRef.value.handleRemove(file)
-    uploadedSuccessfully()
-  }
-}
-
-function handleRemove(file) {
-  const findex = fileList.value.findIndex(f => f.name === file.name)
-  if (findex > -1) {
-    fileList.value.splice(findex, 1)
-    emit(UPDATE_MODEL_EVENT, listToString(fileList.value))
-  }
-}
-
-function uploadedSuccessfully() {
-  if (number.value > 0 && uploadList.value.length === number.value) {
-    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value)
-    uploadList.value = []
-    number.value = 0
-    emit(UPDATE_MODEL_EVENT, listToString(fileList.value))
-  }
-}
-
-function handleUploadError(msg) {
-  ElMessage.error(isString(msg) ? msg : "上传图片失败")
-  number.value--
-}
-
-function handlePictureCardPreview(file) {
-  dialogImageUrl.value = file.url
-  dialogVisible.value = true
-}
-
-function getFileName(name) {
-  if (!isString(name)) return ""
-  return name.slice(name.lastIndexOf("/") + 1)
-}
-
-function listToString(list, separator = ",") {
-  return list
-    .filter(item => item.url && item.url.indexOf("blob:") !== 0)
-    .map(item => {
-      let url = item.url
-      if (props.baseUrl && url.indexOf(props.baseUrl) === 0) {
-        url = url.replace(props.baseUrl, "")
-      }
-      return url
-    })
-    .join(separator)
-}
-</script>
-
-<style scoped>
-/* 保持原有样式 */
-.component-upload-image :deep(.el-upload--picture-card) {
-  width: 100px;
-  height: 100px;
-  line-height: 110px;
-}
-.component-upload-image :deep(.el-upload-list--picture-card .el-upload-list__item) {
-  width: 100px;
-  height: 100px;
-}
-.component-upload-image :deep(.hide .el-upload--picture-card) {
-  display: none;
-}
-</style>

package/packages/components/button/index.js

@@ -1,11 +0,0 @@
-// 用来整合组件的，最终实现导出组件
-
-import { withInstall } from "@easy-elplus/utils"
-import button from "./src/button.vue"
-
-// 通过 withInstall 方法给 button 添加了一个 Vue3 插件所需的 install 方法
-export const EasyButton = withInstall(button)
-// 可以通过 app.use 来使用，也可以通过 import 方式单独使用
-
-export default EasyButton
-export * from "./src/button.vue"

package/packages/components/button/src/button.vue

@@ -1,32 +0,0 @@
-<script setup>
-import { ref, useAttrs } from "vue"
-import { ElButton } from "element-plus"
-import { omit } from "lodash-es"
-import { isFunction } from "@easy-elplus/utils"
-
-defineOptions({
-  inheritAttrs: false,
-  name: "EasyButton"
-})
-
-const loading = ref(false)
-
-const attrs = useAttrs()
-const onClick = async () => {
-  try {
-    loading.value = true
-
-    if (isFunction(attrs.onClick)) {
-      await attrs.onClick()
-    }
-  } finally {
-    loading.value = false
-  }
-}
-</script>
-
-<template>
-  <el-button :loading="loading" v-bind="omit(attrs, 'onClick')" @click="onClick">
-    <slot />
-  </el-button>
-</template>

package/packages/components/descriptions/index.js

@@ -1,11 +0,0 @@
-// 用来整合组件的，最终实现导出组件
-
-import { withInstall } from "@easy-elplus/utils"
-import Descriptions from "./src/descriptions.vue"
-
-// 通过 withInstall 方法给 button 添加了一个 Vue3 插件所需的 install 方法
-export const EasyDescriptions = withInstall(Descriptions)
-// 可以通过 app.use 来使用，也可以通过 import 方式单独使用
-
-export default EasyDescriptions
-export * from "./src/descriptions.vue"