easy-elplus 1.0.1 → 1.2.0

package/play/src/views/descriptions.vue

@@ -1,194 +0,0 @@
-<script setup lang="ts">
-import { h, ref } from "vue"
-import { ElCheckboxGroup, ElTag, ElButton, ElDivider } from "element-plus"
-import { EasyDescriptions } from "easy-elplus"
-import HeaderComp from "../testComp/HeaderComp.vue"
-import AgeComp from "../testComp/AgeComp.vue"
-
-const descriptionsData = ref({
-  date: "2026-01-30",
-  name: "贾公子",
-  genderType: 1,
-  gender: 0,
-  age: 35,
-  city: 3,
-  course: "自定义标签",
-  price: "自定义标签",
-  state: [0],
-  // 测试空值显示
-  address: "",
-  phone: null,
-  email: undefined
-})
-
-const items = [
-  // 普通项
-  {
-    label: "姓名",
-    value: "name"
-  },
-
-  // 测试空值显示 - 空字符串
-  {
-    label: "地址",
-    value: "address"
-  },
-
-  // 测试空值显示 - null
-  {
-    label: "电话",
-    value: "phone"
-  },
-
-  // 测试空值显示 - undefined
-  {
-    label: "邮箱",
-    value: "email"
-  },
-
-  // 自定义-插槽
-  {
-    label: "course",
-    value: "price"
-  },
-
-  // 自定义-函数组件
-  {
-    span: 2,
-    label: {
-      components: () => h(ElTag, { type: "warning" }, () => "状态")
-    },
-    value: {
-      id: "state",
-      components: () =>
-        h(ElCheckboxGroup, {
-          options: [
-            {
-              label: "未付款",
-              value: 0
-            },
-            {
-              label: "已付款",
-              value: 1
-            },
-            {
-              label: "已发货",
-              value: 2
-            }
-          ]
-        })
-    }
-  },
-
-  // 自定义-组件对象
-  {
-    label: {
-      components: HeaderComp
-    },
-    value: {
-      id: "age",
-      components: AgeComp
-    }
-  },
-
-  // 自定义-动态组件
-  {
-    label: {
-      id: "genderType",
-      components: "el-switch",
-      props: {
-        activeText: "性别",
-        inactiveText: "爱好",
-        activeValue: 1,
-        inactiveValue: 0
-      }
-    },
-    value: {
-      id: "gender",
-      components: "el-switch",
-      props: {
-        activeText: "男",
-        inactiveText: "女",
-        activeValue: 1,
-        inactiveValue: 0
-      }
-    }
-  },
-
-  {
-    label: "时间",
-    value: "date",
-    hidden: data => data.gender === 1
-  }
-]
-
-const groupItems = [
-  {
-    title: "基本信息",
-    extra: "extra",
-    column: 2,
-    items: [
-      { label: "姓名", value: "name", "label-class-name": "my-label", "class-name": "my-content" },
-      { label: "年龄", value: "age" }
-    ]
-  },
-  {
-    title: "配置信息",
-    // 测试分组隐藏：当 gender 为 1 (男) 时隐藏该组
-    hidden: data => data.gender === 1,
-    items: [{ label: "城市", value: "city" }]
-  }
-]
-</script>
-
-<template>
-  <div>
-    <EasyDescriptions v-model="descriptionsData" :items="items" border>
-      <!-- 标题插槽 -->
-      <template #title>
-        <el-tag type="danger" size="large">用户信息</el-tag>
-      </template>
-
-      <!-- 操作区插槽 -->
-      <template #extra>
-        <el-button type="primary" size="small">编辑</el-button>
-        <el-button type="success" size="small">保存</el-button>
-      </template>
-
-      <!-- 自定义内容插槽 -->
-      <template #course>
-        <el-tag type="primary" size="large">
-          {{ descriptionsData.course }}
-        </el-tag>
-      </template>
-
-      <template #price>
-        <el-tag type="success" size="large">
-          {{ descriptionsData.price }}
-        </el-tag>
-      </template>
-    </EasyDescriptions>
-
-    <el-divider>分组模式</el-divider>
-
-    <EasyDescriptions v-model="descriptionsData" :items="groupItems" border>
-      <!-- 分组标题自定义 -->
-      <template #title="{ group }">
-        <span v-if="group.title === '基本信息'"> <i class="el-icon-user"></i> {{ group.title }} (自定义) </span>
-      </template>
-
-      <!-- 分组操作区自定义 -->
-      <template #extra="{ group }">
-        <el-button v-if="group.title === '配置信息'" type="warning" size="small">配置</el-button>
-      </template>
-    </EasyDescriptions>
-  </div>
-</template>
-<style scoped>
-:deep(.my-label) {
-  background: red !important;
-}
-:deep(.my-content) {
-  background: yellow !important;
-}
-</style>

package/play/src/views/dialog.vue

@@ -1,283 +0,0 @@
-<template>
-  <div class="demo-container">
-    <h1 class="demo-title">EasyDialog 命令式弹窗演示</h1>
-    <p class="demo-desc">
-      EasyDialog 是一个基于 Element Plus 的命令式弹窗工具，支持函数式调用、组件载入、状态继承、异步操作等特性。
-    </p>
-
-    <!-- 基础示例 -->
-    <el-card class="demo-card">
-      <template #header>
-        <div class="card-header">基础用法</div>
-      </template>
-      <div class="btn-group">
-        <el-button @click="openSimple">纯文本弹窗</el-button>
-        <el-button type="info" @click="openHtml">HTML 字符串</el-button>
-        <el-button type="warning" @click="openDraggable">不可拖拽 (默认开启)</el-button>
-      </div>
-    </el-card>
-
-    <!-- 组件示例 -->
-    <el-card class="demo-card">
-      <template #header>
-        <div class="card-header">组件载入 & 交互</div>
-      </template>
-      <div class="btn-group">
-        <el-button type="primary" @click="openForm">载入复杂表单</el-button>
-        <el-button type="success" @click="openAsync">异步操作 (Loading)</el-button>
-        <el-button @click="openWithData">传递 Props 并获取结果</el-button>
-      </div>
-    </el-card>
-
-    <!-- 定制演示 -->
-    <el-card class="demo-card">
-      <template #header>
-        <div class="card-header">高级定制</div>
-      </template>
-      <div class="btn-group">
-        <el-button @click="openCustomFooter">自定义页脚 (Render 函数)</el-button>
-        <el-button @click="openNoFooter">隐藏底部按钮</el-button>
-        <el-button @click="openBeforeClose">关闭前拦截</el-button>
-        <el-button @click="openCustomWidth">自定义宽度 (80%)</el-button>
-      </div>
-    </el-card>
-
-    <!-- 连续弹窗 -->
-    <el-card class="demo-card">
-      <template #header>
-        <div class="card-header">其他场景</div>
-      </template>
-      <div class="btn-group">
-        <el-button @click="openSequential">连续弹窗</el-button>
-        <el-button @click="openNested">嵌套弹窗</el-button>
-      </div>
-    </el-card>
-  </div>
-</template>
-
-<script setup>
-import { h } from "vue"
-import { EasyDialog } from "easy-elplus"
-import { ElButton, ElMessage, ElMessageBox } from "element-plus"
-import DialogContent from "../testComp/DialogContent.vue"
-import AsyncDemo from "../testComp/AsyncDemo.vue"
-import NestedDemo from "../testComp/NestedDemo.vue"
-
-// 1. 基础用法 - 纯文本
-const openSimple = () => {
-  EasyDialog("这是一个最简单的字符串弹窗，点击确认即可关闭。")
-}
-
-// 2. 基础用法 - HTML
-const openHtml = () => {
-  EasyDialog(
-    {
-      render: () =>
-        h("div", [
-          h("h3", { style: "color: var(--el-color-primary)" }, "HTML 内容"),
-          h("p", "您可以在这里使用 Vue 的渲染函数或返回组件定义。")
-        ])
-    },
-    {},
-    { title: "渲染函数示例" }
-  )
-}
-
-// 3. 不可拖拽
-const openDraggable = () => {
-  EasyDialog(
-    "这个弹窗设置了 draggable: false，因此无法通过标题栏拖拽移动。",
-    {},
-    {
-      title: "禁用拖拽",
-      draggable: false
-    }
-  )
-}
-
-// 4. 载入复杂表单
-const openForm = () => {
-  EasyDialog(
-    DialogContent,
-    {}, // props
-    {
-      title: "复杂表单演示",
-      width: "700px",
-      methodKey: "confirm", // 调用 DialogContent 暴露的 confirm 方法
-      onConfirm: instance => {
-        // instance 为组件实例，可以从其暴露的属性获取数据
-        console.log("表单确认，数据：", instance.getFormData())
-        ElMessage.success("表单数据获取成功，请查看控制台")
-      }
-    }
-  )
-}
-
-// 5. 异步操作
-const openAsync = () => {
-  EasyDialog(
-    AsyncDemo,
-    {},
-    {
-      title: "异步提交演示",
-      // methodKey 默认为 'submit'，AsyncDemo 暴露了 submit 且它是 async 的
-      onConfirm: async instance => {
-        // 这里也可以再做一些异步处理
-        ElMessage.info("Dialog 已关闭，收到的数据: " + instance.userInput)
-      }
-    }
-  )
-    .then(res => {
-      console.log("Promise Resolved:", res)
-    })
-    .catch(() => {
-      console.log("User Cancelled")
-    })
-}
-
-// 6. 传递 Props
-const openWithData = () => {
-  EasyDialog(
-    DialogContent,
-    {
-      row: {
-        name: "Antigravity",
-        region: "shanghai",
-        delivery: true,
-        desc: "我是自带数据的"
-      }
-    },
-    {
-      title: "编辑模式 (Props 传递)",
-      onConfirm: inst => {
-        const data = inst.getFormData()
-        ElMessage.success(`姓名已改为: ${data.name}`)
-      }
-    }
-  )
-}
-
-// 7. 自定义页脚
-const openCustomFooter = () => {
-  EasyDialog(
-    "演示如何使用 footer 渲染函数来自定义页脚布局。",
-    {},
-    {
-      title: "自定义页脚",
-      footer: ({ close, confirm, loading }) =>
-        h(
-          "div",
-          {
-            style: "display: flex; justify-content: space-between; align-items: center; width: 100%"
-          },
-          [
-            h("span", { style: "color: #999; font-size: 13px" }, "这是一个完全自定义的页脚 ->"),
-            h("div", [
-              h(ElButton, { onClick: close, size: "small" }, () => "直接关闭"),
-              h(
-                ElButton,
-                {
-                  type: "danger",
-                  loading: loading,
-                  onClick: confirm,
-                  size: "small"
-                },
-                () => "执行确认"
-              )
-            ])
-          ]
-        )
-    }
-  )
-}
-
-// 8. 隐藏页脚
-const openNoFooter = () => {
-  EasyDialog(
-    "这个弹窗没有页脚按钮，只能通过右上角或点击遮罩层关闭。",
-    {},
-    {
-      title: "隐藏页脚",
-      showConfirmButton: false,
-      showCancelButton: false
-    }
-  )
-}
-
-// 9. 关闭前回调
-const openBeforeClose = () => {
-  EasyDialog(
-    "尝试关闭此弹窗，会触发 beforeClose 确认。",
-    {},
-    {
-      title: "关闭前拦截",
-      beforeClose: done => {
-        ElMessageBox.confirm("确定要关闭吗？")
-          .then(() => {
-            done()
-          })
-          .catch(() => {})
-      }
-    }
-  )
-}
-
-// 10. 自定义宽度
-const openCustomWidth = () => {
-  EasyDialog(
-    "设置 width: '80%'",
-    {},
-    {
-      title: "大尺寸弹窗",
-      width: "80%"
-    }
-  )
-}
-
-// 11. 连续弹窗
-const openSequential = async () => {
-  try {
-    await EasyDialog("第一步：确认开始", {}, { title: "步骤 1" })
-    await EasyDialog("第二步：进行中", {}, { title: "步骤 2" })
-    await EasyDialog("第三步：已完成", {}, { title: "步骤 3" })
-    ElMessage.success("全部流程完成")
-  } catch {
-    ElMessage.info("流程已中断")
-  }
-}
-
-// 12. 嵌套弹窗
-const openNested = () => {
-  EasyDialog(NestedDemo, {}, { title: "嵌套弹窗演示" })
-}
-</script>
-
-<style scoped>
-.demo-container {
-  padding: 20px;
-  max-width: 1000px;
-  margin: 0 auto;
-}
-.demo-title {
-  font-size: 28px;
-  margin-bottom: 8px;
-  color: #303133;
-}
-.demo-desc {
-  color: #606266;
-  margin-bottom: 30px;
-  line-height: 1.6;
-}
-.demo-card {
-  margin-bottom: 24px;
-}
-.card-header {
-  font-weight: bold;
-  font-size: 16px;
-}
-.btn-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-}
-</style>

package/play/src/views/file-upload.vue

@@ -1,170 +0,0 @@
-<template>
-  <div class="demo-container">
-    <h1 class="demo-title">EasyFileUpload 文件上传演示</h1>
-
-    <el-card class="demo-card">
-      <template #header>
-        <div class="card-header">基础用法</div>
-      </template>
-      <easy-file-upload
-        v-model="fileList"
-        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-        :limit="3"
-      />
-      <div class="result-box">
-        <h4>绑定值 (v-model):</h4>
-        <code>{{ fileList }}</code>
-      </div>
-    </el-card>
-
-    <el-card class="demo-card">
-      <template #header>
-        <div class="card-header">携带 Token & 基础路径</div>
-      </template>
-      <easy-file-upload
-        v-model="tokenFileList"
-        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-        :headers="{ Authorization: 'Bearer demo-token' }"
-        base-url="https://example.com/"
-        :limit="5"
-      />
-      <div class="result-box">
-        <h4>绑定值 (已自动去除 baseUrl):</h4>
-        <code>{{ tokenFileList }}</code>
-      </div>
-    </el-card>
-
-    <el-card class="demo-card">
-      <template #header>
-        <div class="card-header">限制类型 & 大小</div>
-      </template>
-      <p class="demo-info">仅支持 .pdf/.doc/.docx 格式，单个文件不超过 2MB</p>
-      <easy-file-upload
-        v-model="restrictedList"
-        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-        :file-type="['pdf', 'doc', 'docx']"
-        :file-size="2"
-        :limit="2"
-      />
-      <div class="result-box">
-        <h4>绑定值:</h4>
-        <code>{{ restrictedList }}</code>
-      </div>
-    </el-card>
-
-    <el-card class="demo-card">
-      <template #header>
-        <div class="card-header">自定义响应路径</div>
-      </template>
-      <p class="demo-info">假设后端返回格式为: <code>{ success: true, result: { fileUrl: "xxx" } }</code></p>
-      <easy-file-upload
-        v-model="customResponseList"
-        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-        :check-success="res => res.success === true"
-        response-path="result.fileUrl"
-        error-field="message"
-        :limit="3"
-      />
-      <div class="result-box">
-        <h4>绑定值:</h4>
-        <code>{{ customResponseList }}</code>
-      </div>
-    </el-card>
-
-    <el-card class="demo-card">
-      <template #header>
-        <div class="card-header">不显示提示信息</div>
-      </template>
-      <easy-file-upload
-        v-model="noTipList"
-        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-        :is-show-tip="false"
-        :limit="3"
-      />
-      <div class="result-box">
-        <h4>绑定值:</h4>
-        <code>{{ noTipList }}</code>
-      </div>
-    </el-card>
-
-    <el-card class="demo-card">
-      <template #header>
-        <div class="card-header">预设文件列表</div>
-      </template>
-      <p class="demo-info">可以通过 v-model 预设已有的文件列表</p>
-      <easy-file-upload
-        v-model="presetList"
-        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-        base-url="https://example.com/"
-        :limit="5"
-      />
-      <div class="result-box">
-        <h4>绑定值:</h4>
-        <code>{{ presetList }}</code>
-      </div>
-      <el-button @click="resetPresetList" style="margin-top: 10px">重置预设列表</el-button>
-    </el-card>
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue"
-
-const fileList = ref("")
-const tokenFileList = ref("")
-const restrictedList = ref("")
-const customResponseList = ref("")
-const noTipList = ref("")
-const presetList = ref("files/document1.pdf,files/document2.docx,files/report.xlsx")
-
-function resetPresetList() {
-  presetList.value = "files/document1.pdf,files/document2.docx,files/report.xlsx"
-}
-</script>
-
-<style scoped>
-.demo-container {
-  padding: 20px;
-  max-width: 1000px;
-  margin: 0 auto;
-}
-.demo-title {
-  font-size: 28px;
-  margin-bottom: 20px;
-  color: #303133;
-}
-.demo-card {
-  margin-bottom: 24px;
-}
-.card-header {
-  font-weight: bold;
-}
-.demo-info {
-  font-size: 14px;
-  color: #909399;
-  margin-bottom: 12px;
-}
-.demo-info code {
-  background: #f5f7fa;
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-size: 12px;
-}
-.result-box {
-  margin-top: 20px;
-  padding: 12px;
-  background: #f5f7fa;
-  border-radius: 4px;
-  border-left: 4px solid #409eff;
-}
-.result-box h4 {
-  margin: 0 0 8px 0;
-  font-size: 14px;
-  color: #606266;
-}
-.result-box code {
-  color: #409eff;
-  word-break: break-all;
-  font-family: monospace;
-}
-</style>