EaseUI：把 Vue 3 中后台组件直接复制进项目，不用装包也不用配样式

# 假设你把 EaseUI 组件统一放在 src/components/easeui/ 下
mkdir -p src/components/easeui
cp path/to/easeui/xly-signature.vue src/components/easeui/

<template>
  <el-form :model="form" label-width="100px" @submit.prevent="handleSubmit">
    <el-form-item label="申请人">
      <el-input v-model="form.applicant" placeholder="请输入姓名" />
    </el-form-item>

    <el-form-item label="手写签名">
      <XlySignature
        ref="signatureRef"
        :width="400"
        :height="200"
        :line-width="3"
        :line-color="#333"
        background="#fafafa"
      />
      <div style="margin-top: 8px;">
        <el-button size="small" @click="clearSignature">清除签名</el-button>
      </div>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交申请</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive } from 'vue'
import XlySignature from '@/components/easeui/xly-signature.vue'

const signatureRef = ref(null)
const form = reactive({
  applicant: '',
  signatureImage: ''
})

function clearSignature() {
  signatureRef.value?.clear()
}

async function handleSubmit() {
  // 从签名板导出 base64 图片
  const imageData = signatureRef.value?.toBase64('image/png')
  if (!imageData) {
    // 组件内部可能返回空字符串表示未签名
    console.warn('签名区域为空，请先签名')
    return
  }
  form.signatureImage = imageData

  // 实际项目中把 base64 转成 Blob 上传，这里演示提交数据结构
  console.log('提交数据:', {
    applicant: form.applicant,
    signatureImage: form.signatureImage.substring(0, 50) + '...(truncated)'
  })
}
</script>

<template>
  <XlyImageCropper
    ref="cropperRef"
    :src="imageSrc"
    :aspect-ratio="1"
    output-type="blob"
    @confirm="onCropConfirm"
  />
</template>

<script setup>
import { ref } from 'vue'
import XlyImageCropper from '@/components/easeui/xly-image-cropper.vue'

const cropperRef = ref(null)
const imageSrc = ref('')

// 选择文件后设置 imageSrc
function onFileChange(file) {
  imageSrc.value = URL.createObjectURL(file.raw)
}

function onCropConfirm(croppedBlob) {
  // croppedBlob 是裁剪后的 Blob 对象，可直接上传
  const formData = new FormData()
  formData.append('avatar', croppedBlob, 'avatar.png')
  // fetch 或 axios 上传 formData...
}
</script>