easy-elplus 1.0.1 → 1.2.0

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

@@ -1,100 +0,0 @@
-<template>
-  <div class="demo-container">
-    <h1 class="demo-title">EasyImageUpload 图片上传演示</h1>
-
-    <el-card class="demo-card">
-      <template #header>
-        <div class="card-header">基础用法</div>
-      </template>
-      <easy-image-upload
-        v-model="imageList"
-        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-        :limit="3"
-      />
-      <div class="result-box">
-        <h4>绑定值 (v-model):</h4>
-        <code>{{ imageList }}</code>
-      </div>
-    </el-card>
-
-    <el-card class="demo-card">
-      <template #header>
-        <div class="card-header">携带 Token & 基础路径</div>
-      </template>
-      <easy-image-upload
-        v-model="tokenImageList"
-        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-        :headers="{ Authorization: 'Bearer demo-token' }"
-        base-url="https://fuss10.elemecdn.com/"
-        :limit="5"
-      />
-      <div class="result-box">
-        <h4>绑定值 (已自动去除 baseUrl):</h4>
-        <code>{{ tokenImageList }}</code>
-      </div>
-    </el-card>
-
-    <el-card class="demo-card">
-      <template #header>
-        <div class="card-header">限制类型 & 大小</div>
-      </template>
-      <p class="demo-info">仅支持 .png 格式，单张不超过 1MB</p>
-      <easy-image-upload
-        v-model="restrictedList"
-        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-        :file-type="['png']"
-        :file-size="1"
-        :limit="2"
-      />
-    </el-card>
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue"
-
-const imageList = ref("3/7c/3ea6beec64369c2642b92c6726f1epng.png,2/e2/27e722544c057b5f30b9d62d46695png.png")
-const tokenImageList = ref("3/7c/3ea6beec64369c2642b92c6726f1epng.png")
-const restrictedList = ref("")
-</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;
-}
-.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>

package/play/src/views/table.vue

@@ -1,185 +0,0 @@
-<script setup>
-import { h, ref, computed } from "vue"
-import { ElTag, ElMessage } from "element-plus"
-// import { EasyTable } from "easy-elplus"
-import { EasyTable } from "test-elplus"
-import * as iconsVue from "@element-plus/icons-vue"
-
-// 表格引用
-const tableRef = ref(null)
-
-// 模拟数据
-const tableData = ref([
-  {
-    date: "2016-05-03",
-    name: "贾公子1",
-    gender: 1,
-    age: 35,
-    city: "北京",
-    course: "Vue源码",
-    price: 699,
-    status: 1
-  },
-  {
-    date: "2016-05-02",
-    name: "贾公子2",
-    gender: 0,
-    age: 45,
-    city: "上海",
-    course: "React进阶",
-    price: 999,
-    status: 0
-  },
-  {
-    date: "2016-05-04",
-    name: "贾公子3",
-    gender: 1,
-    age: 25,
-    city: "杭州",
-    course: "Node核心",
-    price: 1398,
-    status: 1
-  }
-])
-
-// 分页配置
-const page = ref(1)
-const limit = ref(10)
-const total = ref(100)
-
-// 列配置
-const columns = computed(() => [
-  // 1. 多选
-  { type: "selection", width: 50 },
-  // 2. 序号
-  { type: "index", label: "序号", width: 60, align: "center" },
-  // 3. 普通列
-  { prop: "date", label: "日期", width: 120 },
-  // 4. 插槽列 (使用最新语法: [type]-[prop])
-  { prop: "name", label: "姓名", width: 120, key: "name" },
-  // 5. 渲染函数列
-  {
-    prop: "gender",
-    label: "性别",
-    width: 80,
-    render: ({ row }) => h(ElTag, { type: row.gender ? "primary" : "danger" }, () => (row.gender ? "男" : "女"))
-  },
-  // 6. 字符串渲染 (HTML)
-  {
-    prop: "age",
-    label: "年龄",
-    width: 80,
-    render: ({ row }) => `<b style="color: #409eff">${row.age} 岁</b>`
-  },
-  // 7. 格式化列 (formatter)
-  {
-    prop: "status",
-    label: "状态",
-    width: 100,
-    formatter: row => (row.status ? "<span style='color: green'>正常</span>" : "<span style='color: red'>禁用</span>")
-  },
-  { prop: "city", label: "城市" },
-  // 8. 价格列
-  {
-    prop: "price",
-    label: "价格",
-    formatter: row => `¥ ${row.price.toFixed(2)}`
-  }
-])
-
-// 操作按钮配置
-const operates = {
-  width: 250,
-  fixed: "right",
-  list: [
-    {
-      label: "编辑",
-      type: "primary",
-      icon: iconsVue.Edit,
-      method: (row, index) => {
-        ElMessage.info(`编辑第 ${index + 1} 行: ${row.name}`)
-      }
-    },
-    {
-      label: "查看",
-      type: "success",
-      icon: iconsVue.View,
-      show: row => row.status === 1, // 条件显示
-      method: row => {
-        console.log("查看详情:", row)
-      }
-    },
-    {
-      label: "删除",
-      type: "danger",
-      icon: iconsVue.Delete,
-      confirm: true, // 更多按钮演示
-      method: row => {
-        ElMessage.error(`删除: ${row.name}`)
-      }
-    },
-    {
-      label: "更多选项1",
-      method: row => console.log("更多1", row)
-    },
-    {
-      label: "更多选项2",
-      method: row => console.log("更多2", row)
-    }
-  ]
-}
-
-// 事件处理
-const handleSelectionChange = val => {
-  console.log("选中项变化:", val)
-}
-
-const onPagination = ({ page, limit }) => {
-  ElMessage.success(`分页变化: 第${page}页, 每页${limit}条`)
-}
-</script>
-
-<template>
-  <div style="padding: 20px; height: 600px; display: flex; flex-direction: column">
-    <h3>EasyTable 最新功能演示</h3>
-
-    <EasyTable
-      ref="tableRef"
-      :table-data="tableData"
-      :columns="columns"
-      :operates="operates"
-      :total="total"
-      v-model:page="page"
-      v-model:limit="limit"
-      :options="{
-        border: true,
-        stripe: true,
-        highlightCurrentRow: true
-      }"
-      pagination-position="right"
-      @handleSelectionChange="handleSelectionChange"
-      @pagination="onPagination"
-    >
-      <!-- 使用新语法定义插槽: [类型]-[key/prop] -->
-      <!-- header-name 定义姓名列的表头 -->
-      <template #header-name="{ column }">
-        <el-tag effect="dark">自定义 {{ column.label }}</el-tag>
-      </template>
-
-      <!-- default-name 定义姓名列的内容 -->
-      <template #default-name="{ row }">
-        <span style="font-weight: bold; color: #67c23a">{{ row.name }}</span>
-      </template>
-    </EasyTable>
-
-    <div style="margin-top: 20px">
-      <p>当前页码: {{ page }} | 每页条数: {{ limit }}</p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-:deep(.el-table) {
-  margin-top: 10px;
-}
-</style>

package/play/test/index.html

@@ -1,31 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>浏览器引用组件库包</title>
-  </head>
-
-  <body>
-    <div id="app">
-      <easy-button></easy-button>
-    </div>
-    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
-    <script src="../../dist//easy-elplus//dist//index.full.js"></script>
-    <script>
-      const { createApp, ref } = Vue
-      const App = {
-        setup() {
-          const message = ref("浏览器引用组件库包")
-          return {
-            message
-          }
-        }
-      }
-      const app = Vue.createApp(App)
-      app.use(EasyElPlus)
-      app.mount("#app")
-    </script>
-  </body>
-</html>

package/play/vite.config.js

@@ -1,14 +0,0 @@
-import { defineConfig } from "vite"
-import vue from "@vitejs/plugin-vue"
-import path from "path"
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [vue()],
-  resolve: {
-    alias: {
-      "easy-elplus": path.resolve(__dirname, "../dist/easy-elplus"),
-      "test-elplus": path.resolve(__dirname, "../packages/components")
-    }
-  }
-})

package/pnpm-workspace.yaml

@@ -1,11 +0,0 @@
-packages:
-  - play # 存放组件测试的代码
-  - docs # 存放组件文档
-  - packages/* # packages 目录下都是组件包
-  - internal/* # 存放内部工具
-
-linkWorkspacePackages: true
-
-catalog:
-  "@vue/shared": ^3.5.27
-  vue: ^3.5.27

package/prettier.config.js

@@ -1,39 +0,0 @@
-export default {
-  // 使用单引号 (true：单引号，false：双引号)
-  singleQuote: false,
-  // 结尾不用分号 (true：有，false：没有)
-  semi: false,
-  // 缩进制表符宽度 | 空格数
-  tabWidth: 2,
-  // 多行时尽可能打印尾随逗号 可选值"<none|es5|all>"
-  trailingComma: "none",
-  // 使用制表符而不是空格缩进行 (true：制表符，false：空格)
-  useTabs: false,
-  // 换行符使用 lf 结尾是 可选值 "<auto|lf|crlf|cr>"
-  endOfLine: "auto",
-  // 指定最大换行长度
-  printWidth: 120,
-  // 在对象字面量中决定是否将属性名用引号括起来 可选值 "<as-needed|consistent|preserve>"
-  quoteProps: "as-needed",
-  // 在JSX中使用单引号而不是双引号 (true：单引号，false：双引号)
-  jsxSingleQuote: false,
-  // 在对象，数组括号与文字之间加空格 "{ foo: bar }" (true：有，false：没有)
-  bracketSpacing: true,
-  // 将 > 多行元素放在最后一行的末尾，而不是单独放在下一行 (true：放末尾，false：单独一行)
-  bracketSameLine: false,
-  // (x) => {} 箭头函数参数只有一个时是否要有小括号 (avoid：省略括号，always：不省略括号)
-  arrowParens: "avoid",
-  // 指定要使用的解析器，不需要写文件开头的 @prettier
-  requirePragma: false,
-  // 可以在文件顶部插入一个特殊标记，指定该文件已使用 Prettier 格式化
-  insertPragma: false,
-  // 用于控制文本是否应该被换行以及如何进行换行
-  proseWrap: "preserve",
-  // 在html中空格是否是敏感的 "css" - 遵守 CSS 显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
-  htmlWhitespaceSensitivity: "css",
-  // 控制在 Vue 单文件组件中 <script> 和 <style> 标签内的代码缩进方式
-  vueIndentScriptAndStyle: false,
-  // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码 (rangeStart：开始，rangeEnd：结束)
-  rangeStart: 0,
-  rangeEnd: Infinity
-}