hrp-ui-base 1.4.7 → 1.4.8

package/src/components/layout/personal-sign/PersonalSignDialog.vue

@@ -1,658 +1,658 @@
-<!--
- * @description: 个人签名弹窗
- * @fileName: PersonalSignDialog.vue
--->
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="个人签名"
-    width="600"
-    center
-    show-close
-    close-on-press-escape
-  >
-    <div class="personal-sign-content">
-      <div v-if="!toSignStatus" class="signbox">
-        <div v-if="isSign" class="haveSign">
-          <div class="signImgBox">
-            <el-image style="width: 133px; height: 100px" :src="nowBindUrlMsg" fit="contain" v-if="nowBind" />
-            <!-- 未签名提示 -->
-            <div v-else class="no-sign-tip">
-              <svg class="tip-icon" viewBox="0 0 1024 1024" width="32" height="32">
-                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="#d9d9d9"/>
-                <path d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm32 120h64c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-64c-4.4 0-8-3.6-8-8V464c0-4.4 3.6-8 8-8z" fill="#d9d9d9"/>
-              </svg>
-              <span class="tip-text">当前还未进行签字</span>
-            </div>
-          </div>
-          <el-button class="sign-btn" type="primary" @click="handleReSignClick">{{ nowBind ? "重签" : "去签字" }}</el-button>
-        </div>
-        <div v-else class="unHaveSign">
-          <div class="unHaveSignUp">
-            <div class="qrCodeImgBox">
-              <QrcodeVue :size="143" :value="codeContent" class="order-print-big-qrcode" ref="QrCodeRef" />
-              <!-- 已扫描状态覆盖层 -->
-              <div v-if="ifScanned" class="qrcode-status-overlay scanned">
-                <svg class="status-icon" viewBox="0 0 1024 1024" width="24" height="24">
-                  <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" fill="#333333"/>
-                </svg>
-                <span class="status-text">已扫描</span>
-              </div>
-              <!-- 已过期状态覆盖层 -->
-              <div v-if="ifExpired" class="qrcode-status-overlay expired" @click="handleReSignClick">
-                <svg class="status-icon" viewBox="0 0 1024 1024" width="24" height="24">
-                  <path d="M960 416V192l-73.056 73.056a447.712 447.712 0 0 0-373.6-201.088C265.92 63.968 65.312 264.544 65.312 512S265.92 960.032 513.344 960.032a448.064 448.064 0 0 0 415.232-279.488 38.368 38.368 0 1 0-70.272-29.568 371.36 371.36 0 0 1-344.96 232.064c-205.408 0-371.36-165.984-371.36-371.04 0-205.088 165.952-371.04 371.36-371.04 108.896 0 206.752 47.2 274.464 122.016L736 314.016h224a32 32 0 0 0 32-32z" fill="#b0b0b0"/>
-                </svg>
-                <span class="status-text">二维码已过期，点击刷新</span>
-              </div>
-            </div>
-            <div class="qrCodeBtnBox">
-              <el-button type="primary" size="default" @click="handleReturnClick">取消</el-button>
-            </div>
-          </div>
-          <div class="uploadContent">使用钉钉扫码签名或点击上传</div>
-          <div class="uploadContent">为保证签名识别效果最佳，请选择纯白色背景、减少阴影的图片</div>
-          <div class="upload-link">
-            <a href="javascript:;" @click="triggerFileInput">
-              已有签名？点击上传
-            </a>
-          </div>
-          <!-- 隐藏的 file input -->
-          <input 
-            type="file" 
-            ref="fileInput"
-            style="display: none;"
-            accept=".jpg,.jpeg,.png,.bmp,.raw,.heif,.tiff,.gif"
-            @change="handleFileChange"
-          >
-        </div>
-      </div>
-    </div>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleSignSave">保存</el-button>
-      </div>
-    </template>
-    <!-- 图片裁剪弹框 -->
-    <ImageCropper ref="imageCropperRef" @success="handleCropSuccess"></ImageCropper>
-  </el-dialog>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue'
-import { ElMessage } from 'element-plus'
-import QrcodeVue from 'qrcode.vue'
-import ImageCropper from './ImageCropper.vue'
-import FlowSignController from '../../../api/bms/flow/FlowSignController'
-import FileUploadController from '../../../api/bms/file/FileUploadController'
-
-const dialogVisible = ref<boolean>(false)
-const nowBind = ref<string>('')
-const nowBindUrlMsg = ref<string>('')
-const toSignStatus = ref<boolean>(false)
-const isSign = ref<boolean>(true)
-const currentImgId = ref<string>('')
-
-const codeContent = ref<string>('')
-const qrCodeUUID = ref<string>('')
-const ifScanned = ref<boolean>(false)
-const ifExpired = ref<boolean>(false)
-const qrCodeTimeRecord = ref<any>()
-const queryQrCodeTimeRecord = ref<any>()
-
-const fileInput = ref<HTMLInputElement>()
-const imageCropperRef = ref<any>()
-
-// 允许的图片格式
-const allowedTypes = ['image/jpeg','image/png','image/bmp','image/raw','image/heif','image/tiff','image/gif']
-const allowedExtensions = ['.jpg','.jpeg','.png','.bmp','.raw','.heif','.tiff','.gif']
-const maxSize = 5 * 1024 * 1024
-
-watch(nowBind, () => {
-  isSign.value = true
-})
-
-watch(dialogVisible, (newVal) => {
-  if (newVal === false) {
-    dialogClose()
-  }
-})
-
-const pageId = ref<string>('01-01-04-001')
-
-const uploadOss = async (file: any) => {
-  FileUploadController.upload(file, pageId.value).then((data: any) => {
-    if (data.code === 200 && data.res) {
-      nowBind.value = data.res.url
-      nowBindUrlMsg.value = data.res.url
-      currentImgId.value = data.res.fileId
-      isSign.value = true
-      handleReturnClick()
-    } else {
-      ElMessage.error("数据发生错误，请重新上传!")
-    }
-  }).catch((err) => {
-    ElMessage.error("oss上传发生错误，请重试!")
-    console.error(err)
-  })
-}
-
-const handleReSignClick = async () => {
-  generateQrCode()
-  await updateQrCodeStatus("unscanned")
-  startQueryStatus()
-  isSign.value = false
-}
-
-const handleReturnClick = async () => {
-  await updateQrCodeStatus("expired")
-  clearInterval(qrCodeTimeRecord.value)
-  clearInterval(queryQrCodeTimeRecord.value)
-  isSign.value = true
-}
-
-// 触发文件选择
-const triggerFileInput = () => {
-  if (!fileInput.value) return
-  fileInput.value.click()
-}
-
-const handleFileChange = async (event: any) => {
-  const file = event.target.files[0]
-  if (!file) return
-
-  if (!allowedTypes.includes(file.type)) {
-    ElMessage.error(`仅支持 ${allowedExtensions.join(', ')} 格式`)
-    resetFileInput()
-    return
-  }
-  if (file.size > maxSize) {
-    const maxSizeMB = (maxSize / (1024 * 1024)).toFixed(1)
-    ElMessage.error(`文件大小不能超过 ${maxSizeMB}MB`)
-    resetFileInput()
-    return
-  }
-
-  try {
-    const processedBlob = await extractSignatureImageTransparent(file)
-    imageCropperRef.value?.open(processedBlob)
-  } catch (e) {
-    console.error(e)
-    ElMessage.error('签名图片处理失败')
-  } finally {
-    resetFileInput()
-  }
-}
-
-const resetFileInput = () => {
-  if (fileInput.value) {
-    fileInput.value.value = ''
-  }
-}
-
-// 裁剪成功回调
-const handleCropSuccess = async (croppedBlob: Blob) => {
-  try {
-    const croppedFile = new File(
-      [croppedBlob],
-      '签名文件.png',
-      { type: 'image/png' }
-    )
-    await uploadOss(croppedFile)
-  } catch (e) {
-    console.error(e)
-    ElMessage.error('签名图片上传失败')
-  }
-}
-
-const generateUUID = () => {
-  const timestamp = performance.now().toString(36)
-  const random = Math.random().toString(36).slice(2)
-  const random2 = Math.random().toString(36).slice(2)
-  return `${timestamp}-${random}-${random2}`.replace(/\./g, '')
-}
-
-const generateQrCode = () => {
-  ifScanned.value = false
-  ifExpired.value = false
-  qrCodeUUID.value = generateUUID()
-  const urlStr = `${window.location.origin}/mobile/login/index.html?host=${localStorage.getItem('TenantHost')}&url=${'/full-screen-sign-process'}?qrCodeUUID=${qrCodeUUID.value}`
-  codeContent.value = urlStr
-}
-
-const startPolling = () => {
-  qrCodeTimeRecord.value = setInterval(async () => {
-    try {
-      const data = await FlowSignController.startPolling(qrCodeUUID.value)
-      if (data.code === 200 && data.res) {
-        clearInterval(qrCodeTimeRecord.value)
-        nowBind.value = data.res.url
-        nowBindUrlMsg.value = data.res.url
-        currentImgId.value = data.res.fileId
-      }
-    } catch (e) {
-      // ignore
-    }
-  }, 2000)
-}
-
-const handleSignSave = () => {
-  FlowSignController.personalSignSave(currentImgId.value).then(data => {
-    if (data.code === 200) {
-      ElMessage.success('个人签名上传成功')
-    }
-  }).catch(() => {
-    dialogVisible.value = false
-  }).finally(() => {
-    dialogVisible.value = false
-  })
-}
-
-const getPersonalSign = async () => {
-  await FlowSignController.gerPersonalSign().then(data => {
-    if (data.code === 200 && data.res) {
-      nowBind.value = data.res.url
-      nowBindUrlMsg.value = data.res.url
-    }
-  })
-}
-
-const startQueryStatus = () => {
-  queryQrCodeTimeRecord.value = setInterval(() => {
-    FlowSignController.queryQrCodeStatus(qrCodeUUID.value).then(data => {
-      if (data.code === 200 && data.res === "scanned") {
-        clearInterval(queryQrCodeTimeRecord.value)
-        ifScanned.value = true
-        startPolling()
-      } else if (data.code === 200 && (data.res === null || data.res === "expired")) {
-        clearInterval(queryQrCodeTimeRecord.value)
-        ifExpired.value = true
-        ElMessage.error("二维码已过期，请刷新")
-      }
-    })
-  }, 2000)
-}
-
-const updateQrCodeStatus = (status: string) => {
-  if (status === 'scanned') {
-    ifScanned.value = true
-  } else if (status === 'expired') {
-    ifExpired.value = true
-  }
-  FlowSignController.updateQrCodeStatus(status, qrCodeUUID.value).then(data => {
-    if (data.code === 200 && data.res) {
-      console.log("二维码状态更新成功")
-    } else if (data.code === 200 && !data.res) {
-      ElMessage.error(data.msg || "二维码失效请刷新后重试")
-    }
-  })
-}
-
-const dialogClose = () => {
-  clearInterval(qrCodeTimeRecord.value)
-  clearInterval(queryQrCodeTimeRecord.value)
-  ifScanned.value = false
-  ifExpired.value = false
-  isSign.value = true
-}
-
-/** 打开弹窗 */
-const open = () => {
-  dialogVisible.value = true
-  getPersonalSign()
-}
-
-// ====== 图片处理工具函数 ======
-
-const extractSignatureImageTransparent = (file: File): Promise<Blob> => {
-  return new Promise((resolve, reject) => {
-    const img = new Image()
-    img.onload = () => {
-      const canvas = document.createElement('canvas')
-      const ctx = canvas.getContext('2d')!
-
-      canvas.width = img.width
-      canvas.height = img.height
-      ctx.drawImage(img, 0, 0)
-
-      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
-      const data = imageData.data
-
-      const grays: number[] = []
-      let min = 255, max = 0
-      for (let i = 0; i < data.length; i += 4) {
-        const gray = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]
-        grays.push(gray)
-        min = Math.min(min, gray)
-        max = Math.max(max, gray)
-      }
-
-      const threshold = min + (max - min) * 0.35
-
-      for (let i = 0; i < data.length; i += 4) {
-        const gray = grays[i / 4]
-        if (gray > threshold) {
-          data[i + 3] = 0
-        } else {
-          data[i] = data[i + 1] = data[i + 2] = 0
-          data[i + 3] = 255
-        }
-      }
-
-      enhanceContrast(data)
-      for (let i = 0; i < 2; i++) {
-        dilateAlpha(data, canvas.width, canvas.height, 1)
-        fillGapsAlpha(data, canvas.width, canvas.height)
-      }
-      removeHorizontalLines(data, canvas.width, canvas.height)
-      ctx.putImageData(imageData, 0, 0)
-
-      canvas.toBlob(
-        blob => blob ? resolve(blob) : reject(),
-        'image/png',
-        1
-      )
-    }
-
-    img.onerror = reject
-    img.src = URL.createObjectURL(file)
-  })
-}
-
-const dilateAlpha = (data: Uint8ClampedArray, width: number, height: number, radius = 1) => {
-  const copy = new Uint8ClampedArray(data)
-  const idx = (x: number, y: number) => (y * width + x) * 4
-
-  for (let y = radius; y < height - radius; y++) {
-    for (let x = radius; x < width - radius; x++) {
-      const center = idx(x, y)
-      if (copy[center + 3] === 255) continue
-
-      let hasOpaqueNeighbor = false
-      for (let dy = -radius; dy <= radius && !hasOpaqueNeighbor; dy++) {
-        for (let dx = -radius; dx <= radius; dx++) {
-          const i = idx(x + dx, y + dy)
-          if (copy[i + 3] === 255) {
-            hasOpaqueNeighbor = true
-            break
-          }
-        }
-      }
-
-      if (hasOpaqueNeighbor) {
-        data[center + 3] = 255
-        for (let c = 0; c < 3; c++) {
-          data[center + c] = copy[center + c]
-        }
-      }
-    }
-  }
-}
-
-const fillGapsAlpha = (data: Uint8ClampedArray, width: number, height: number) => {
-  const copy = new Uint8ClampedArray(data)
-  const idx = (x: number, y: number) => (y * width + x) * 4
-
-  for (let y = 1; y < height - 1; y++) {
-    for (let x = 1; x < width - 1; x++) {
-      const i = idx(x, y)
-      if (copy[i + 3] === 255) continue
-
-      let opaqueCount = 0
-      let r = [0, 0, 0]
-      for (const [dx, dy] of [[1, 0], [-1, 0], [0, 1], [0, -1]]) {
-        const neighbor = idx(x + dx, y + dy)
-        if (copy[neighbor + 3] === 255) {
-          opaqueCount++
-          for (let c = 0; c < 3; c++) r[c] += copy[neighbor + c]
-        }
-      }
-
-      if (opaqueCount >= 2) {
-        data[i + 3] = 255
-        for (let c = 0; c < 3; c++) data[i + c] = Math.round(r[c] / opaqueCount)
-      }
-    }
-  }
-}
-
-const enhanceContrast = (data: Uint8ClampedArray) => {
-  for (let i = 0; i < data.length; i += 4) {
-    if (data[i + 3] === 255) {
-      for (let c = 0; c < 3; c++) {
-        const val = data[i + c] / 255
-        data[i + c] = Math.min(255, Math.pow(val, 0.4) * 255)
-      }
-    }
-  }
-}
-
-const removeHorizontalLines = (data: Uint8ClampedArray, width: number, height: number) => {
-  const threshold = width * 0.7
-  const idx = (x: number, y: number) => (y * width + x) * 4
-
-  for (let y = 0; y < height; y++) {
-    let count = 0
-    let startX = 0
-    for (let x = 0; x < width; x++) {
-      if (data[idx(x, y) + 3] === 255) {
-        if (count === 0) startX = x
-        count++
-      } else {
-        if (count > threshold) {
-          for (let i = startX; i < x; i++) {
-            data[idx(i, y) + 3] = 0
-          }
-        }
-        count = 0
-      }
-    }
-    if (count > threshold) {
-      for (let i = startX; i < width; i++) {
-        data[idx(i, y) + 3] = 0
-      }
-    }
-  }
-}
-
-defineExpose({ open })
-</script>
-
-<style scoped lang="scss">
-.personal-sign-content {
-  width: 100%;
-  min-height: 220px;
-}
-
-.signbox {
-  margin-top: 8px;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: flex-start;
-  flex-wrap: wrap;
-}
-
-.haveSign {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  width: 100%;
-  margin: 0 auto;
-  min-height: 197px;
-  text-align: center;
-  position: relative;
-}
-
-.sign-btn {
-  position: absolute;
-  right: calc(50% - 145px);
-  top: 72.5px;
-  margin-left: 16px;
-}
-
-.unHaveSign {
-  width: 100%;
-  margin: 0 auto;
-  min-height: 197px;
-  text-align: center;
-  position: relative;
-
-  .uploadContent {
-    margin-bottom: 5px;
-    font-size: 11.5px;
-  }
-
-  .upload-link {
-    font-weight: 500;
-    font-size: 10px;
-    color: #409eff;
-    cursor: pointer;
-  }
-}
-
-.signImgBox, .qrCodeImgBox {
-  box-sizing: border-box;
-  width: 145px;
-  height: 145px;
-  overflow: hidden;
-  margin: 0 auto 15px;
-  position: relative;
-}
-
-.signImgBox {
-  width: 133px;
-  height: 100px;
-  margin-top: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .no-sign-tip {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    background: #fafafa;
-    border-radius: 4px;
-    gap: 8px;
-
-    .tip-icon {
-      flex-shrink: 0;
-    }
-
-    .tip-text {
-      font-size: 12px;
-      color: #999;
-      text-align: center;
-      line-height: 1.4;
-      padding: 0 8px;
-    }
-  }
-}
-
-.unHaveSignUp {
-  display: flex;
-  justify-content: center;
-  position: relative;
-
-  .qrCodeBtnBox {
-    position: absolute;
-    right: calc(50% - 145px);
-    top: 72.5px;
-    margin-left: 16px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
-    .el-button + .el-button {
-      margin-left: 0 !important;
-    }
-
-    .el-button {
-      min-width: 60px;
-    }
-  }
-
-  .uploadContent {
-    margin-top: 8px;
-  }
-}
-
-// 二维码状态覆盖层样式
-.qrcode-status-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  animation: fadeIn 0.25s ease-out;
-  z-index: 10;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-image:
-      repeating-linear-gradient(0deg, transparent, transparent 1px, currentColor 1px, currentColor 2px),
-      repeating-linear-gradient(90deg, transparent, transparent 1px, currentColor 1px, currentColor 2px);
-    opacity: 0.25;
-    z-index: 1;
-  }
-
-  .status-icon {
-    flex-shrink: 0;
-    position: relative;
-    z-index: 3;
-  }
-
-  .status-text {
-    font-size: 12px;
-    font-weight: 400;
-    letter-spacing: 0.5px;
-    line-height: 1;
-    position: relative;
-    z-index: 3;
-  }
-
-  &.scanned {
-    background: rgba(255, 255, 255, 0.96);
-    color: rgba(100, 100, 100, 0.3);
-
-    .status-text {
-      color: #333333;
-    }
-  }
-
-  &.expired {
-    background: rgba(40, 40, 40, 0.92);
-    color: rgba(180, 180, 180, 0.3);
-    cursor: pointer;
-
-    .status-text {
-      color: #e0e0e0;
-    }
-
-    .status-icon path {
-      fill: #b0b0b0;
-    }
-  }
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-</style>
+<!--
+ * @description: 个人签名弹窗
+ * @fileName: PersonalSignDialog.vue
+-->
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    title="个人签名"
+    width="600"
+    center
+    show-close
+    close-on-press-escape
+  >
+    <div class="personal-sign-content">
+      <div v-if="!toSignStatus" class="signbox">
+        <div v-if="isSign" class="haveSign">
+          <div class="signImgBox">
+            <el-image style="width: 133px; height: 100px" :src="nowBindUrlMsg" fit="contain" v-if="nowBind" />
+            <!-- 未签名提示 -->
+            <div v-else class="no-sign-tip">
+              <svg class="tip-icon" viewBox="0 0 1024 1024" width="32" height="32">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="#d9d9d9"/>
+                <path d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm32 120h64c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-64c-4.4 0-8-3.6-8-8V464c0-4.4 3.6-8 8-8z" fill="#d9d9d9"/>
+              </svg>
+              <span class="tip-text">当前还未进行签字</span>
+            </div>
+          </div>
+          <el-button class="sign-btn" type="primary" @click="handleReSignClick">{{ nowBind ? "重签" : "去签字" }}</el-button>
+        </div>
+        <div v-else class="unHaveSign">
+          <div class="unHaveSignUp">
+            <div class="qrCodeImgBox">
+              <QrcodeVue :size="143" :value="codeContent" class="order-print-big-qrcode" ref="QrCodeRef" />
+              <!-- 已扫描状态覆盖层 -->
+              <div v-if="ifScanned" class="qrcode-status-overlay scanned">
+                <svg class="status-icon" viewBox="0 0 1024 1024" width="24" height="24">
+                  <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" fill="#333333"/>
+                </svg>
+                <span class="status-text">已扫描</span>
+              </div>
+              <!-- 已过期状态覆盖层 -->
+              <div v-if="ifExpired" class="qrcode-status-overlay expired" @click="handleReSignClick">
+                <svg class="status-icon" viewBox="0 0 1024 1024" width="24" height="24">
+                  <path d="M960 416V192l-73.056 73.056a447.712 447.712 0 0 0-373.6-201.088C265.92 63.968 65.312 264.544 65.312 512S265.92 960.032 513.344 960.032a448.064 448.064 0 0 0 415.232-279.488 38.368 38.368 0 1 0-70.272-29.568 371.36 371.36 0 0 1-344.96 232.064c-205.408 0-371.36-165.984-371.36-371.04 0-205.088 165.952-371.04 371.36-371.04 108.896 0 206.752 47.2 274.464 122.016L736 314.016h224a32 32 0 0 0 32-32z" fill="#b0b0b0"/>
+                </svg>
+                <span class="status-text">二维码已过期，点击刷新</span>
+              </div>
+            </div>
+            <div class="qrCodeBtnBox">
+              <el-button type="primary" size="default" @click="handleReturnClick">取消</el-button>
+            </div>
+          </div>
+          <div class="uploadContent">使用钉钉扫码签名或点击上传</div>
+          <div class="uploadContent">为保证签名识别效果最佳，请选择纯白色背景、减少阴影的图片</div>
+          <div class="upload-link">
+            <a href="javascript:;" @click="triggerFileInput">
+              已有签名？点击上传
+            </a>
+          </div>
+          <!-- 隐藏的 file input -->
+          <input 
+            type="file" 
+            ref="fileInput"
+            style="display: none;"
+            accept=".jpg,.jpeg,.png,.bmp,.raw,.heif,.tiff,.gif"
+            @change="handleFileChange"
+          >
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSignSave">保存</el-button>
+      </div>
+    </template>
+    <!-- 图片裁剪弹框 -->
+    <ImageCropper ref="imageCropperRef" @success="handleCropSuccess"></ImageCropper>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import QrcodeVue from 'qrcode.vue'
+import ImageCropper from './ImageCropper.vue'
+import FlowSignController from '../../../api/bms/flow/FlowSignController'
+import FileUploadController from '../../../api/bms/file/FileUploadController'
+
+const dialogVisible = ref<boolean>(false)
+const nowBind = ref<string>('')
+const nowBindUrlMsg = ref<string>('')
+const toSignStatus = ref<boolean>(false)
+const isSign = ref<boolean>(true)
+const currentImgId = ref<string>('')
+
+const codeContent = ref<string>('')
+const qrCodeUUID = ref<string>('')
+const ifScanned = ref<boolean>(false)
+const ifExpired = ref<boolean>(false)
+const qrCodeTimeRecord = ref<any>()
+const queryQrCodeTimeRecord = ref<any>()
+
+const fileInput = ref<HTMLInputElement>()
+const imageCropperRef = ref<any>()
+
+// 允许的图片格式
+const allowedTypes = ['image/jpeg','image/png','image/bmp','image/raw','image/heif','image/tiff','image/gif']
+const allowedExtensions = ['.jpg','.jpeg','.png','.bmp','.raw','.heif','.tiff','.gif']
+const maxSize = 5 * 1024 * 1024
+
+watch(nowBind, () => {
+  isSign.value = true
+})
+
+watch(dialogVisible, (newVal) => {
+  if (newVal === false) {
+    dialogClose()
+  }
+})
+
+const pageId = ref<string>('01-01-04-001')
+
+const uploadOss = async (file: any) => {
+  FileUploadController.upload(file, pageId.value).then((data: any) => {
+    if (data.code === 200 && data.res) {
+      nowBind.value = data.res.url
+      nowBindUrlMsg.value = data.res.url
+      currentImgId.value = data.res.fileId
+      isSign.value = true
+      handleReturnClick()
+    } else {
+      ElMessage.error("数据发生错误，请重新上传!")
+    }
+  }).catch((err) => {
+    ElMessage.error("oss上传发生错误，请重试!")
+    console.error(err)
+  })
+}
+
+const handleReSignClick = async () => {
+  generateQrCode()
+  await updateQrCodeStatus("unscanned")
+  startQueryStatus()
+  isSign.value = false
+}
+
+const handleReturnClick = async () => {
+  await updateQrCodeStatus("expired")
+  clearInterval(qrCodeTimeRecord.value)
+  clearInterval(queryQrCodeTimeRecord.value)
+  isSign.value = true
+}
+
+// 触发文件选择
+const triggerFileInput = () => {
+  if (!fileInput.value) return
+  fileInput.value.click()
+}
+
+const handleFileChange = async (event: any) => {
+  const file = event.target.files[0]
+  if (!file) return
+
+  if (!allowedTypes.includes(file.type)) {
+    ElMessage.error(`仅支持 ${allowedExtensions.join(', ')} 格式`)
+    resetFileInput()
+    return
+  }
+  if (file.size > maxSize) {
+    const maxSizeMB = (maxSize / (1024 * 1024)).toFixed(1)
+    ElMessage.error(`文件大小不能超过 ${maxSizeMB}MB`)
+    resetFileInput()
+    return
+  }
+
+  try {
+    const processedBlob = await extractSignatureImageTransparent(file)
+    imageCropperRef.value?.open(processedBlob)
+  } catch (e) {
+    console.error(e)
+    ElMessage.error('签名图片处理失败')
+  } finally {
+    resetFileInput()
+  }
+}
+
+const resetFileInput = () => {
+  if (fileInput.value) {
+    fileInput.value.value = ''
+  }
+}
+
+// 裁剪成功回调
+const handleCropSuccess = async (croppedBlob: Blob) => {
+  try {
+    const croppedFile = new File(
+      [croppedBlob],
+      '签名文件.png',
+      { type: 'image/png' }
+    )
+    await uploadOss(croppedFile)
+  } catch (e) {
+    console.error(e)
+    ElMessage.error('签名图片上传失败')
+  }
+}
+
+const generateUUID = () => {
+  const timestamp = performance.now().toString(36)
+  const random = Math.random().toString(36).slice(2)
+  const random2 = Math.random().toString(36).slice(2)
+  return `${timestamp}-${random}-${random2}`.replace(/\./g, '')
+}
+
+const generateQrCode = () => {
+  ifScanned.value = false
+  ifExpired.value = false
+  qrCodeUUID.value = generateUUID()
+  const urlStr = `${window.location.origin}/mobile/login/index.html?host=${localStorage.getItem('TenantHost')}&url=${'/full-screen-sign-process'}?qrCodeUUID=${qrCodeUUID.value}`
+  codeContent.value = urlStr
+}
+
+const startPolling = () => {
+  qrCodeTimeRecord.value = setInterval(async () => {
+    try {
+      const data = await FlowSignController.startPolling(qrCodeUUID.value)
+      if (data.code === 200 && data.res) {
+        clearInterval(qrCodeTimeRecord.value)
+        nowBind.value = data.res.url
+        nowBindUrlMsg.value = data.res.url
+        currentImgId.value = data.res.fileId
+      }
+    } catch (e) {
+      // ignore
+    }
+  }, 2000)
+}
+
+const handleSignSave = () => {
+  FlowSignController.personalSignSave(currentImgId.value).then(data => {
+    if (data.code === 200) {
+      ElMessage.success('个人签名上传成功')
+    }
+  }).catch(() => {
+    dialogVisible.value = false
+  }).finally(() => {
+    dialogVisible.value = false
+  })
+}
+
+const getPersonalSign = async () => {
+  await FlowSignController.gerPersonalSign().then(data => {
+    if (data.code === 200 && data.res) {
+      nowBind.value = data.res.url
+      nowBindUrlMsg.value = data.res.url
+    }
+  })
+}
+
+const startQueryStatus = () => {
+  queryQrCodeTimeRecord.value = setInterval(() => {
+    FlowSignController.queryQrCodeStatus(qrCodeUUID.value).then(data => {
+      if (data.code === 200 && data.res === "scanned") {
+        clearInterval(queryQrCodeTimeRecord.value)
+        ifScanned.value = true
+        startPolling()
+      } else if (data.code === 200 && (data.res === null || data.res === "expired")) {
+        clearInterval(queryQrCodeTimeRecord.value)
+        ifExpired.value = true
+        ElMessage.error("二维码已过期，请刷新")
+      }
+    })
+  }, 2000)
+}
+
+const updateQrCodeStatus = (status: string) => {
+  if (status === 'scanned') {
+    ifScanned.value = true
+  } else if (status === 'expired') {
+    ifExpired.value = true
+  }
+  FlowSignController.updateQrCodeStatus(status, qrCodeUUID.value).then(data => {
+    if (data.code === 200 && data.res) {
+      console.log("二维码状态更新成功")
+    } else if (data.code === 200 && !data.res) {
+      ElMessage.error(data.msg || "二维码失效请刷新后重试")
+    }
+  })
+}
+
+const dialogClose = () => {
+  clearInterval(qrCodeTimeRecord.value)
+  clearInterval(queryQrCodeTimeRecord.value)
+  ifScanned.value = false
+  ifExpired.value = false
+  isSign.value = true
+}
+
+/** 打开弹窗 */
+const open = () => {
+  dialogVisible.value = true
+  getPersonalSign()
+}
+
+// ====== 图片处理工具函数 ======
+
+const extractSignatureImageTransparent = (file: File): Promise<Blob> => {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.onload = () => {
+      const canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')!
+
+      canvas.width = img.width
+      canvas.height = img.height
+      ctx.drawImage(img, 0, 0)
+
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+      const data = imageData.data
+
+      const grays: number[] = []
+      let min = 255, max = 0
+      for (let i = 0; i < data.length; i += 4) {
+        const gray = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]
+        grays.push(gray)
+        min = Math.min(min, gray)
+        max = Math.max(max, gray)
+      }
+
+      const threshold = min + (max - min) * 0.35
+
+      for (let i = 0; i < data.length; i += 4) {
+        const gray = grays[i / 4]
+        if (gray > threshold) {
+          data[i + 3] = 0
+        } else {
+          data[i] = data[i + 1] = data[i + 2] = 0
+          data[i + 3] = 255
+        }
+      }
+
+      enhanceContrast(data)
+      for (let i = 0; i < 2; i++) {
+        dilateAlpha(data, canvas.width, canvas.height, 1)
+        fillGapsAlpha(data, canvas.width, canvas.height)
+      }
+      removeHorizontalLines(data, canvas.width, canvas.height)
+      ctx.putImageData(imageData, 0, 0)
+
+      canvas.toBlob(
+        blob => blob ? resolve(blob) : reject(),
+        'image/png',
+        1
+      )
+    }
+
+    img.onerror = reject
+    img.src = URL.createObjectURL(file)
+  })
+}
+
+const dilateAlpha = (data: Uint8ClampedArray, width: number, height: number, radius = 1) => {
+  const copy = new Uint8ClampedArray(data)
+  const idx = (x: number, y: number) => (y * width + x) * 4
+
+  for (let y = radius; y < height - radius; y++) {
+    for (let x = radius; x < width - radius; x++) {
+      const center = idx(x, y)
+      if (copy[center + 3] === 255) continue
+
+      let hasOpaqueNeighbor = false
+      for (let dy = -radius; dy <= radius && !hasOpaqueNeighbor; dy++) {
+        for (let dx = -radius; dx <= radius; dx++) {
+          const i = idx(x + dx, y + dy)
+          if (copy[i + 3] === 255) {
+            hasOpaqueNeighbor = true
+            break
+          }
+        }
+      }
+
+      if (hasOpaqueNeighbor) {
+        data[center + 3] = 255
+        for (let c = 0; c < 3; c++) {
+          data[center + c] = copy[center + c]
+        }
+      }
+    }
+  }
+}
+
+const fillGapsAlpha = (data: Uint8ClampedArray, width: number, height: number) => {
+  const copy = new Uint8ClampedArray(data)
+  const idx = (x: number, y: number) => (y * width + x) * 4
+
+  for (let y = 1; y < height - 1; y++) {
+    for (let x = 1; x < width - 1; x++) {
+      const i = idx(x, y)
+      if (copy[i + 3] === 255) continue
+
+      let opaqueCount = 0
+      let r = [0, 0, 0]
+      for (const [dx, dy] of [[1, 0], [-1, 0], [0, 1], [0, -1]]) {
+        const neighbor = idx(x + dx, y + dy)
+        if (copy[neighbor + 3] === 255) {
+          opaqueCount++
+          for (let c = 0; c < 3; c++) r[c] += copy[neighbor + c]
+        }
+      }
+
+      if (opaqueCount >= 2) {
+        data[i + 3] = 255
+        for (let c = 0; c < 3; c++) data[i + c] = Math.round(r[c] / opaqueCount)
+      }
+    }
+  }
+}
+
+const enhanceContrast = (data: Uint8ClampedArray) => {
+  for (let i = 0; i < data.length; i += 4) {
+    if (data[i + 3] === 255) {
+      for (let c = 0; c < 3; c++) {
+        const val = data[i + c] / 255
+        data[i + c] = Math.min(255, Math.pow(val, 0.4) * 255)
+      }
+    }
+  }
+}
+
+const removeHorizontalLines = (data: Uint8ClampedArray, width: number, height: number) => {
+  const threshold = width * 0.7
+  const idx = (x: number, y: number) => (y * width + x) * 4
+
+  for (let y = 0; y < height; y++) {
+    let count = 0
+    let startX = 0
+    for (let x = 0; x < width; x++) {
+      if (data[idx(x, y) + 3] === 255) {
+        if (count === 0) startX = x
+        count++
+      } else {
+        if (count > threshold) {
+          for (let i = startX; i < x; i++) {
+            data[idx(i, y) + 3] = 0
+          }
+        }
+        count = 0
+      }
+    }
+    if (count > threshold) {
+      for (let i = startX; i < width; i++) {
+        data[idx(i, y) + 3] = 0
+      }
+    }
+  }
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped lang="scss">
+.personal-sign-content {
+  width: 100%;
+  min-height: 220px;
+}
+
+.signbox {
+  margin-top: 8px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.haveSign {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  width: 100%;
+  margin: 0 auto;
+  min-height: 197px;
+  text-align: center;
+  position: relative;
+}
+
+.sign-btn {
+  position: absolute;
+  right: calc(50% - 145px);
+  top: 72.5px;
+  margin-left: 16px;
+}
+
+.unHaveSign {
+  width: 100%;
+  margin: 0 auto;
+  min-height: 197px;
+  text-align: center;
+  position: relative;
+
+  .uploadContent {
+    margin-bottom: 5px;
+    font-size: 11.5px;
+  }
+
+  .upload-link {
+    font-weight: 500;
+    font-size: 10px;
+    color: #409eff;
+    cursor: pointer;
+  }
+}
+
+.signImgBox, .qrCodeImgBox {
+  box-sizing: border-box;
+  width: 145px;
+  height: 145px;
+  overflow: hidden;
+  margin: 0 auto 15px;
+  position: relative;
+}
+
+.signImgBox {
+  width: 133px;
+  height: 100px;
+  margin-top: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .no-sign-tip {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background: #fafafa;
+    border-radius: 4px;
+    gap: 8px;
+
+    .tip-icon {
+      flex-shrink: 0;
+    }
+
+    .tip-text {
+      font-size: 12px;
+      color: #999;
+      text-align: center;
+      line-height: 1.4;
+      padding: 0 8px;
+    }
+  }
+}
+
+.unHaveSignUp {
+  display: flex;
+  justify-content: center;
+  position: relative;
+
+  .qrCodeBtnBox {
+    position: absolute;
+    right: calc(50% - 145px);
+    top: 72.5px;
+    margin-left: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .el-button + .el-button {
+      margin-left: 0 !important;
+    }
+
+    .el-button {
+      min-width: 60px;
+    }
+  }
+
+  .uploadContent {
+    margin-top: 8px;
+  }
+}
+
+// 二维码状态覆盖层样式
+.qrcode-status-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  animation: fadeIn 0.25s ease-out;
+  z-index: 10;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image:
+      repeating-linear-gradient(0deg, transparent, transparent 1px, currentColor 1px, currentColor 2px),
+      repeating-linear-gradient(90deg, transparent, transparent 1px, currentColor 1px, currentColor 2px);
+    opacity: 0.25;
+    z-index: 1;
+  }
+
+  .status-icon {
+    flex-shrink: 0;
+    position: relative;
+    z-index: 3;
+  }
+
+  .status-text {
+    font-size: 12px;
+    font-weight: 400;
+    letter-spacing: 0.5px;
+    line-height: 1;
+    position: relative;
+    z-index: 3;
+  }
+
+  &.scanned {
+    background: rgba(255, 255, 255, 0.96);
+    color: rgba(100, 100, 100, 0.3);
+
+    .status-text {
+      color: #333333;
+    }
+  }
+
+  &.expired {
+    background: rgba(40, 40, 40, 0.92);
+    color: rgba(180, 180, 180, 0.3);
+    cursor: pointer;
+
+    .status-text {
+      color: #e0e0e0;
+    }
+
+    .status-icon path {
+      fill: #b0b0b0;
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+</style>