yg-yygl 0.0.1

package/dist/views/demo-case/seal-usage/index.vue

@@ -0,0 +1,1461 @@
+<script setup lang="ts">
+import type {
+  AvailableTools,
+  DocumentInfo,
+  SealListItem,
+  SealPosition,
+  SignatureListItem,
+  SignaturePosition,
+  SigningMode,
+  SigningTool,
+  UnifiedPosition,
+} from '#/api/seal/demo-types';
+
+import { onMounted, ref } from 'vue';
+
+import { Dialog } from '@udp/component-ui';
+
+import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
+
+import { getAvailableTools } from '#/api/seal/demo';
+
+// 模拟文档数据
+const documentData = ref<DocumentInfo>({
+  title: '中电鸿信信息技术有限公司',
+  subtitle: '报价单',
+  to: '',
+  description: '感谢咨询，现将贵公司所需配件报价如下：',
+  items: [
+    {
+      id: 1,
+      name: '服务器硬件',
+      spec: '联想',
+      quantity: 5,
+      unit: '台',
+      unitPrice: 20_000,
+      amount: 100_000,
+      remark: '',
+    },
+    {
+      id: 2,
+      name: '数据库正版',
+      spec: 'SQLServer',
+      quantity: 5,
+      unit: '套',
+      unitPrice: 9998,
+      amount: 49_990,
+      remark: '',
+    },
+    {
+      id: 3,
+      name: 'OA内部管理系统',
+      spec: '定制',
+      quantity: 5,
+      unit: '套',
+      unitPrice: 390_000,
+      amount: 390_000,
+      remark: '',
+    },
+    {
+      id: 4,
+      name: '进销存管理系统',
+      spec: '定制',
+      quantity: 5,
+      unit: '套',
+      unitPrice: 260_000,
+      amount: 260_000,
+      remark: '',
+    },
+    {
+      id: 5,
+      name: '服务费',
+      spec: '',
+      quantity: 5,
+      unit: '年',
+      unitPrice: 80_000,
+      amount: 80_000,
+      remark: '',
+    },
+    {
+      id: 6,
+      name: '差旅费用',
+      spec: '',
+      quantity: 5,
+      unit: '年',
+      unitPrice: 60_000,
+      amount: 80_000,
+      remark: '',
+    },
+  ],
+  supplierInfo: {
+    contact: '李经理',
+    phone: '153XXXX1342',
+    fax: '010-88XXXX88',
+    account: '100000',
+  },
+  clientInfo: {
+    contact: '张经理',
+    phone: '153XXXX1342',
+    fax: '021-88XXXX88',
+    account: '888XXXXXX888',
+  },
+  date: '2025-09-08',
+  signatory: '盖章：',
+});
+
+// 状态管理
+const documentRef = ref<HTMLElement>();
+
+// 统一工具管理
+const availableTools = ref<AvailableTools>({ seals: [], signatures: [] });
+const currentMode = ref<SigningMode>('mixed'); // 默认混合模式
+const currentTool = ref<SigningTool>('seal'); // 默认选择印章工具
+const selectedSeal = ref<null | SealListItem>(null);
+const selectedSignature = ref<null | SignatureListItem>(null);
+
+// 统一位置管理
+const positions = ref<UnifiedPosition[]>([]); // 当前标记的位置
+const signHistory = ref<UnifiedPosition[]>([]); // 已完成签署的历史记录
+
+// 弹窗状态管理
+const loading = ref(false);
+const showSealDialog = ref(false);
+const showSignatureDialog = ref(false);
+const isSigningMode = ref(false);
+
+// 获取所有可用工具（印章和签名）
+const loadAvailableTools = async () => {
+  try {
+    loading.value = true;
+    const tools = await getAvailableTools();
+    availableTools.value = tools;
+    console.log('获取到的工具:', tools);
+
+    // 详细的印章数据调试
+    if (tools.seals.length > 0) {
+      console.log('印章列表详情:');
+      tools.seals.forEach((seal, index) => {
+        console.log(`印章${index + 1}:`, {
+          id: seal.id,
+          idType: typeof seal.id,
+          sealName: seal.sealName,
+          status: seal.status,
+        });
+      });
+    }
+
+    // 提供用户提示信息
+    const sealCount = tools.seals.length;
+    const signatureCount = tools.signatures.length;
+
+    if (sealCount === 0 && signatureCount === 0) {
+      ElMessage.warning('暂无可用的印章或签名，请先创建印章和签名');
+      return;
+    }
+
+    let message = '工具加载完成：';
+    const details = [];
+    if (sealCount > 0) details.push(`${sealCount}个印章`);
+    if (signatureCount > 0) details.push(`${signatureCount}个签名`);
+    message += details.join('、');
+
+    ElMessage.success(message);
+  } catch (error) {
+    console.error('获取工具列表失败:', error);
+    ElMessage.error('获取工具列表失败，请检查网络连接或联系管理员');
+
+    // 提供降级方案
+    availableTools.value = { seals: [], signatures: [] };
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 生成唯一ID
+const generateId = () => {
+  const bytes = crypto.getRandomValues(new Uint8Array(8));
+  const random = Array.from(bytes, b => b.toString(36)).join('');
+  return `${Date.now()}-${random}`;
+};
+
+// 冲突检测和验证
+const checkPositionConflict = (newPosition: UnifiedPosition): boolean => {
+  return positions.value.some((existing) => {
+    if (existing.id === newPosition.id) return false;
+
+    // 计算两个矩形是否重叠
+    const isOverlapping = !(
+      newPosition.x + newPosition.width < existing.x ||
+      existing.x + existing.width < newPosition.x ||
+      newPosition.y + newPosition.height < existing.y ||
+      existing.y + existing.height < newPosition.y
+    );
+
+    return isOverlapping;
+  });
+};
+
+const validatePositionPlacement = (
+  position: UnifiedPosition,
+): { message?: string; valid: boolean } => {
+  const documentRect = documentRef.value?.getBoundingClientRect();
+  if (!documentRect) {
+    return { valid: false, message: '文档容器未找到' };
+  }
+
+  // 检查位置是否在文档边界内
+  if (
+    position.x < 0 ||
+    position.y < 0 ||
+    position.x + position.width > documentRect.width ||
+    position.y + position.height > documentRect.height
+  ) {
+    return { valid: false, message: '位置超出文档边界' };
+  }
+
+  // 检查是否与其他位置冲突
+  if (checkPositionConflict(position)) {
+    return { valid: false, message: '位置与现有印章或签名重叠' };
+  }
+
+  // 检查最小尺寸要求
+  const minSize = 30;
+  if (position.width < minSize || position.height < minSize) {
+    return { valid: false, message: `尺寸不能小于${minSize}px` };
+  }
+
+  return { valid: true };
+};
+
+// 模式和工具管理方法
+const enterSigningMode = () => {
+  const hasSeals = availableTools.value.seals.length > 0;
+  const hasSignatures = availableTools.value.signatures.length > 0;
+
+  if (!hasSeals && !hasSignatures) {
+    ElMessage.warning('暂无可用的印章或签名');
+    return;
+  }
+
+  if (!hasSeals && hasSignatures) {
+    currentMode.value = 'signature-only';
+    currentTool.value = 'signature';
+  } else if (hasSeals && !hasSignatures) {
+    currentMode.value = 'seal-only';
+    currentTool.value = 'seal';
+  } else {
+    currentMode.value = 'mixed';
+    currentTool.value = 'seal'; // 默认选择印章
+  }
+
+  isSigningMode.value = true;
+  openToolDialog();
+};
+
+// 切换工具类型
+const switchTool = (tool: SigningTool) => {
+  if (
+    currentMode.value === 'mixed' ||
+    (currentMode.value === 'seal-only' && tool === 'seal') ||
+    (currentMode.value === 'signature-only' && tool === 'signature')
+  ) {
+    currentTool.value = tool;
+    openToolDialog();
+  }
+};
+
+// 打开工具选择弹窗
+const openToolDialog = () => {
+  if (currentTool.value === 'seal') {
+    if (availableTools.value.seals.length === 0) {
+      ElMessage.warning('暂无可用印章');
+      return;
+    }
+    showSealDialog.value = true;
+  } else {
+    if (availableTools.value.signatures.length === 0) {
+      ElMessage.warning('暂无可用签名');
+      return;
+    }
+    showSignatureDialog.value = true;
+  }
+};
+
+// 退出签章模式
+const exitSigningMode = () => {
+  isSigningMode.value = false;
+  selectedSeal.value = null;
+  selectedSignature.value = null;
+  showSealDialog.value = false;
+  showSignatureDialog.value = false;
+};
+
+// 选择印章
+const selectSeal = (seal: SealListItem) => {
+  console.log('选择印章详情:', {
+    id: seal.id,
+    sealName: seal.sealName,
+    sealType: seal.sealType,
+    status: seal.status,
+    fullSeal: seal,
+  });
+  selectedSeal.value = seal;
+  selectedSignature.value = null; // 清除签名选择
+  showSealDialog.value = false;
+  ElMessage.success(`已选择印章：${seal.sealName}`);
+};
+
+// 选择签名
+const selectSignature = (signature: SignatureListItem) => {
+  selectedSignature.value = signature;
+  selectedSeal.value = null; // 清除印章选择
+  showSignatureDialog.value = false;
+  ElMessage.success(`已选择签名：${signature.signatureName}`);
+};
+
+// 统一文档点击事件 - 添加印章或签名位置
+const onDocumentClick = (event: MouseEvent) => {
+  if (!isSigningMode.value) return;
+
+  // 检查是否有选中的工具
+  const hasSelectedTool =
+    (currentTool.value === 'seal' && selectedSeal.value) ||
+    (currentTool.value === 'signature' && selectedSignature.value);
+
+  if (!hasSelectedTool) {
+    ElMessage.warning('请先选择印章或签名');
+    return;
+  }
+
+  const rect = documentRef.value!.getBoundingClientRect();
+  const x = event.clientX - rect.left;
+  const y = event.clientY - rect.top;
+
+  let newPosition: UnifiedPosition;
+
+  if (
+    currentTool.value === 'seal' &&
+    selectedSeal.value &&
+    selectedSeal.value.id
+  ) {
+    // 创建印章位置
+    newPosition = {
+      id: generateId(),
+      type: 'seal',
+      x,
+      y,
+      width: 80, // 默认大小
+      height: 80,
+      sealId: selectedSeal.value.id,
+      sealName: selectedSeal.value.sealName,
+      sealImage: selectedSeal.value.sealImage,
+      timestamp: new Date().toLocaleString(),
+      signatory: '管理员',
+    };
+    console.log('创建印章位置:', {
+      selectedSealId: selectedSeal.value.id,
+      selectedSealIdType: typeof selectedSeal.value.id,
+      newPositionSealId: newPosition.sealId,
+      newPositionSealIdType: typeof newPosition.sealId,
+    });
+  } else if (
+    currentTool.value === 'signature' &&
+    selectedSignature.value &&
+    selectedSignature.value.id
+  ) {
+    // 创建签名位置
+    newPosition = {
+      id: generateId(),
+      type: 'signature',
+      x,
+      y,
+      width: 120, // 签名默认稍大一些
+      height: 60,
+      signatureId: selectedSignature.value.id,
+      signatureName: selectedSignature.value.signatureName,
+      svgData: selectedSignature.value.svgData,
+      hashValue: selectedSignature.value.hashValue,
+      timestamp: new Date().toLocaleString(),
+      signatory: '管理员',
+    };
+  } else {
+    return;
+  }
+
+  // 验证位置放置
+  const validation = validatePositionPlacement(newPosition);
+  if (!validation.valid) {
+    ElMessage.warning(validation.message || '位置放置无效');
+    return;
+  }
+
+  positions.value.push(newPosition);
+  const typeName = newPosition.type === 'seal' ? '印章' : '签名';
+  const itemName =
+    newPosition.type === 'seal'
+      ? newPosition.sealName
+      : newPosition.signatureName;
+  ElMessage.success(`${typeName}位置已标记：${itemName}`);
+
+  // 调试信息：输出当前所有位置
+  console.log('当前所有位置:', positions.value);
+  console.log(
+    '印章位置数量:',
+    positions.value.filter((p) => p.type === 'seal').length,
+  );
+  console.log(
+    '签名位置数量:',
+    positions.value.filter((p) => p.type === 'signature').length,
+  );
+};
+
+// 移除位置标记
+const removePosition = (index: number) => {
+  const position = positions.value[index];
+  if (position) {
+    positions.value.splice(index, 1);
+    const typeName = position.type === 'seal' ? '印章' : '签名';
+    ElMessage.success(`${typeName}位置已移除`);
+  }
+};
+
+// 统一拖拽开始处理
+const startDrag = (index: number, event: MouseEvent) => {
+  event.preventDefault();
+  const position = positions.value[index];
+  if (!position) return;
+
+  position.isDragging = true;
+  const originalPosition = { ...position };
+
+  const rect = documentRef.value!.getBoundingClientRect();
+  const startX = event.clientX - rect.left - position.x;
+  const startY = event.clientY - rect.top - position.y;
+
+  const onMouseMove = (e: MouseEvent) => {
+    if (!position.isDragging) return;
+
+    const newRect = documentRef.value!.getBoundingClientRect();
+    const newX = e.clientX - newRect.left - startX;
+    const newY = e.clientY - newRect.top - startY;
+
+    // 临时更新位置进行验证
+    const tempPosition = { ...position, x: newX, y: newY };
+    const validation = validatePositionPlacement(tempPosition);
+
+    if (validation.valid) {
+      position.x = newX;
+      position.y = newY;
+    }
+  };
+
+  const onMouseUp = () => {
+    position.isDragging = false;
+
+    // 最终验证
+    const validation = validatePositionPlacement(position);
+    if (!validation.valid) {
+      // 恢复原始位置
+      Object.assign(position, originalPosition);
+      ElMessage.warning(validation.message || '位置无效，已恢复原位置');
+    }
+
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+  };
+
+  document.addEventListener('mousemove', onMouseMove);
+  document.addEventListener('mouseup', onMouseUp);
+};
+
+// 统一大小调整处理
+const startResize = (index: number, event: MouseEvent) => {
+  event.preventDefault();
+  event.stopPropagation();
+
+  const position = positions.value[index];
+  if (!position) return;
+
+  position.isResizing = true;
+  const originalPosition = { ...position };
+
+  const startWidth = position.width;
+  const startHeight = position.height;
+  const startX = event.clientX;
+  const startY = event.clientY;
+
+  const onMouseMove = (e: MouseEvent) => {
+    if (!position.isResizing) return;
+
+    const deltaX = e.clientX - startX;
+    const deltaY = e.clientY - startY;
+
+    const newWidth = Math.max(30, startWidth + deltaX);
+    const newHeight = Math.max(30, startHeight + deltaY);
+
+    // 临时更新尺寸进行验证
+    const tempPosition = { ...position, width: newWidth, height: newHeight };
+    const validation = validatePositionPlacement(tempPosition);
+
+    if (validation.valid) {
+      position.width = newWidth;
+      position.height = newHeight;
+    }
+  };
+
+  const onMouseUp = () => {
+    position.isResizing = false;
+
+    // 最终验证
+    const validation = validatePositionPlacement(position);
+    if (!validation.valid) {
+      // 恢复原始尺寸
+      Object.assign(position, originalPosition);
+      ElMessage.warning(validation.message || '尺寸无效，已恢复原尺寸');
+    }
+
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+  };
+
+  document.addEventListener('mousemove', onMouseMove);
+  document.addEventListener('mouseup', onMouseUp);
+};
+
+// 构建确认消息
+const buildConfirmMessage = (sealCount: number, signatureCount: number) => {
+  let msg = '确定要对文档进行签署吗？\n';
+  if (sealCount > 0 && signatureCount > 0) {
+    msg += `共 ${sealCount} 个印章位置和 ${signatureCount} 个签名位置`;
+  } else if (sealCount > 0) {
+    msg += `共 ${sealCount} 个印章位置`;
+  } else {
+    msg += `共 ${signatureCount} 个签名位置`;
+  }
+  return msg + '\n\n签署后将无法撤销，请确认位置无误。';
+};
+
+// 分离印章位置
+const extractSealPositions = (): SealPosition[] =>
+  positions.value
+    .filter((p) => p.type === 'seal')
+    .filter((p) => p.sealId !== null && p.sealName !== null)
+    .map((p) => ({
+      x: Number(p.x),
+      y: Number(p.y),
+      sealId: p.sealId as any,
+      sealName: p.sealName!,
+      timestamp: p.timestamp,
+      signatory: p.signatory,
+    }));
+
+// 分离签名位置
+const extractSignaturePositions = (): SignaturePosition[] =>
+  positions.value
+    .filter((p) => p.type === 'signature')
+    .filter((p) => p.signatureId !== null && p.signatureName !== null && p.svgData !== null)
+    .map((p) => ({
+      x: Number(p.x),
+      y: Number(p.y),
+      signatureId: p.signatureId as any,
+      signatureName: p.signatureName!,
+      svgData: p.svgData!,
+      timestamp: p.timestamp,
+      signatory: p.signatory,
+    }));
+
+// 执行签署提交
+const doSubmitSign = (sealPositions: SealPosition[], signaturePositions: SignaturePosition[]) => {
+  console.log('提交数据详情:', {
+    sealCount: sealPositions.length,
+    signatureCount: signaturePositions.length,
+    sealPositions,
+    signaturePositions,
+    originalPositions: positions.value,
+  });
+
+  if (sealPositions.length > 0) {
+    console.log('印章ID调试信息:');
+    sealPositions.forEach((pos, index) => {
+      console.log(`印章${index + 1}:`, {
+        sealId: pos.sealId,
+        sealIdType: typeof pos.sealId,
+        sealName: pos.sealName,
+        isValidId: pos.sealId !== null && pos.sealId !== '',
+      });
+    });
+  }
+
+  ElMessage.success('文档签署成功！所有印章和签名已生效');
+  signHistory.value = positions.value.map((pos) => ({
+    ...pos,
+    isResizing: false,
+    isDragging: false,
+  }));
+  exitSigningMode();
+  positions.value = [];
+};
+
+// 确认签章和签名
+const confirmSign = async () => {
+  if (positions.value.length === 0) {
+    ElMessage.warning('请先添加印章或签名位置');
+    return;
+  }
+
+  // 最终位置验证
+  const invalidPositions = positions.value.filter((pos) => {
+    const validation = validatePositionPlacement(pos);
+    return !validation.valid;
+  });
+
+  if (invalidPositions.length > 0) {
+    ElMessage.error(`发现 ${invalidPositions.length} 个无效位置，请调整后重试`);
+    return;
+  }
+
+  const sealCount = positions.value.filter((p) => p.type === 'seal').length;
+  const signatureCount = positions.value.filter((p) => p.type === 'signature').length;
+  const confirmMessage = buildConfirmMessage(sealCount, signatureCount);
+
+  try {
+    await ElMessageBox.confirm(confirmMessage, '确认签署', {
+      confirmButtonText: '确定签署',
+      cancelButtonText: '再检查一下',
+      type: 'warning',
+      distinguishCancelAndClose: true,
+    });
+
+    loading.value = true;
+
+    try {
+      const sealPositions = extractSealPositions();
+      const signaturePositions = extractSignaturePositions();
+      doSubmitSign(sealPositions, signaturePositions);
+    } catch (submitError) {
+      console.error('文档签署失败:', submitError);
+      console.error('提交的数据:', {
+        sealPositions: positions.value.filter((p) => p.type === 'seal'),
+        signaturePositions: positions.value.filter((p) => p.type === 'signature'),
+        allPositions: positions.value,
+      });
+      const errorMessage =
+        submitError instanceof Error ? submitError.message : '未知错误';
+      ElMessage.error(`签署失败：${errorMessage}。请检查网络连接或联系管理员`);
+    }
+  } catch (error) {
+    if (error !== 'cancel' && error !== 'close') {
+      console.error('签署确认失败:', error);
+      ElMessage.error('签署确认过程中发生错误，请重试');
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 打印页面
+const printDocument = () => {
+  window.print();
+};
+
+// 组件挂载时加载数据
+onMounted(() => {
+  loadAvailableTools();
+});
+</script>
+
+<template>
+  <div class="seal-demo-container">
+    <!-- 操作工具栏 -->
+    <div class="toolbar">
+      <div class="toolbar-title">
+        <h2>电子签章使用案例</h2>
+        <p class="text-gray-600">模拟文档签章流程，展示电子印章的应用场景</p>
+      </div>
+      <div class="toolbar-actions">
+        <ElButton type="info" @click="printDocument"> 打印 </ElButton>
+
+        <!-- 工具选择按钮组 -->
+        <div
+          v-if="isSigningMode && currentMode === 'mixed'"
+          class="tool-selector"
+        >
+          <ElButton
+            :type="currentTool === 'seal' ? 'primary' : 'default'"
+            size="small"
+            @click="switchTool('seal')"
+          >
+            印章
+          </ElButton>
+          <ElButton
+            :type="currentTool === 'signature' ? 'primary' : 'default'"
+            size="small"
+            @click="switchTool('signature')"
+          >
+            签名
+          </ElButton>
+        </div>
+
+        <ElButton
+          type="primary"
+          :disabled="isSigningMode"
+          @click="enterSigningMode"
+        >
+          开始签署
+        </ElButton>
+        <ElButton v-if="isSigningMode" type="warning" @click="exitSigningMode">
+          取消签署
+        </ElButton>
+        <ElButton
+          v-if="positions.length > 0"
+          type="danger"
+          @click="confirmSign"
+          :loading="loading"
+        >
+          确认签署
+        </ElButton>
+      </div>
+    </div>
+
+    <!-- 文档预览区域 -->
+    <div class="document-container">
+      <div
+        ref="documentRef"
+        class="document-content"
+        :class="{ 'signing-mode': isSigningMode }"
+        @click="onDocumentClick"
+      >
+        <!-- 文档头部 -->
+        <div class="document-header">
+          <h1>{{ documentData.title }}</h1>
+          <h2>{{ documentData.subtitle }}</h2>
+          <div class="to-info">
+            <span>TO: {{ documentData.to }}</span>
+          </div>
+          <div class="description">
+            {{ documentData.description }}
+          </div>
+          <hr class="divider" />
+        </div>
+
+        <!-- 产品清单 -->
+        <div class="product-section">
+          <h3>一、产品价格</h3>
+          <table class="product-table">
+            <thead>
+              <tr>
+                <th>序号</th>
+                <th>品名</th>
+                <th>规格</th>
+                <th>数量</th>
+                <th>单位</th>
+                <th>单价</th>
+                <th>金额</th>
+                <th>备注</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in documentData.items" :key="item.id">
+                <td>{{ item.id }}</td>
+                <td>{{ item.name }}</td>
+                <td>{{ item.spec }}</td>
+                <td>{{ item.quantity }}</td>
+                <td>{{ item.unit }}</td>
+                <td>{{ item.unitPrice.toFixed(2) }}</td>
+                <td>{{ item.amount.toFixed(2) }}</td>
+                <td>{{ item.remark }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- 联系信息 -->
+        <div class="contact-section">
+          <h3>二、联系信息</h3>
+          <div class="contact-info">
+            <div class="supplier">
+              <p>
+                <strong>供方联系人：</strong>{{ documentData.supplierInfo.contact }}
+              </p>
+              <p>
+                <strong>供方联系电话：</strong>{{ documentData.supplierInfo.phone }}
+              </p>
+              <p>
+                <strong>供方传真号码：</strong>{{ documentData.supplierInfo.fax }}
+              </p>
+              <p>
+                <strong>供方账号：</strong>{{ documentData.supplierInfo.account }}
+              </p>
+            </div>
+            <div class="client">
+              <p>
+                <strong>需方联系人：</strong>{{ documentData.clientInfo.contact }}
+              </p>
+              <p>
+                <strong>需方联系电话：</strong>{{ documentData.clientInfo.phone }}
+              </p>
+              <p>
+                <strong>需方传真号码：</strong>{{ documentData.clientInfo.fax }}
+              </p>
+              <p>
+                <strong>需方账号：</strong>{{ documentData.clientInfo.account }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- 签章区域 -->
+        <div class="signature-section">
+          <div class="signature-right">
+            <p>日期：{{ documentData.date }}</p>
+            <div class="seal-area">
+              <span>{{ documentData.signatory }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 统一位置标记（印章和签名，可拖拽、可调整大小）-->
+        <div
+          v-for="(position, index) in positions"
+          :key="position.id"
+          class="position-marker"
+          :class="{
+            'seal-position': position.type === 'seal',
+            'signature-position': position.type === 'signature',
+          }"
+          :style="{
+            left: `${position.x}px`,
+            top: `${position.y}px`,
+            width: `${position.width}px`,
+            height: `${position.height}px`,
+          }"
+          @mousedown="startDrag(index, $event)"
+        >
+          <!-- 印章渲染 -->
+          <template v-if="position.type === 'seal'">
+            <img
+              v-if="position.sealImage"
+              :src="position.sealImage"
+              :alt="position.sealName"
+              class="seal-image"
+              draggable="false"
+            />
+            <div v-else class="seal-placeholder">
+              {{ position.sealName }}
+            </div>
+          </template>
+
+          <!-- 签名渲染 -->
+          <template v-if="position.type === 'signature'">
+            <div
+              v-if="position.svgData"
+              class="signature-svg"
+              v-html="position.svgData"
+            ></div>
+            <div v-else class="signature-placeholder">
+              {{ position.signatureName }}
+            </div>
+          </template>
+
+          <!-- 大小调整手柄 -->
+          <div
+            class="resize-handle"
+            @mousedown="startResize(index, $event)"
+          ></div>
+
+          <!-- 删除按钮 -->
+          <div class="delete-btn" @click.stop="removePosition(index)">×</div>
+        </div>
+
+        <!-- 已完成签署记录 -->
+        <div
+          v-for="record in signHistory"
+          :key="`signed-${record.id}`"
+          class="signed-record"
+          :class="{
+            'signed-seal': record.type === 'seal',
+            'signed-signature': record.type === 'signature',
+          }"
+          :style="{
+            left: `${record.x}px`,
+            top: `${record.y}px`,
+            width: `${record.width}px`,
+            height: `${record.height}px`,
+          }"
+        >
+          <!-- 已签印章 -->
+          <template v-if="record.type === 'seal'">
+            <img
+              v-if="record.sealImage"
+              :src="record.sealImage"
+              :alt="record.sealName"
+              class="seal-image signed"
+            />
+            <div v-else class="signed-marker">
+              <span>{{ record.sealName }}</span>
+              <small>{{ record.timestamp }}</small>
+            </div>
+          </template>
+
+          <!-- 已签签名 -->
+          <template v-if="record.type === 'signature'">
+            <div
+              v-if="record.svgData"
+              class="signature-svg signed"
+              v-html="record.svgData"
+            ></div>
+            <div v-else class="signed-marker">
+              <span>{{ record.signatureName }}</span>
+              <small>{{ record.timestamp }}</small>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <!-- 签章选择弹窗 -->
+    <Dialog
+      v-model="showSealDialog"
+      title="选择印章"
+      width="800px"
+      :close-on-click-modal="false"
+      :show-confirm-button="false"
+      @close="showSealDialog = false"
+    >
+      <div class="seal-grid">
+        <div
+          v-for="seal in availableTools.seals"
+          :key="seal.id"
+          class="seal-item"
+          @click="selectSeal(seal)"
+        >
+          <div class="seal-preview">
+            <img
+              v-if="seal.sealImage"
+              :src="seal.sealImage"
+              :alt="seal.sealName"
+            />
+            <div v-else class="seal-placeholder">{{ seal.sealName }}</div>
+          </div>
+          <div class="seal-info">
+            <h4>{{ seal.sealName }}</h4>
+            <p>{{ seal.sealType }}</p>
+            <p v-if="seal.description" class="seal-desc">
+              {{ seal.description }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+
+    <!-- 签名选择弹窗 -->
+    <Dialog
+      v-model="showSignatureDialog"
+      title="选择签名"
+      width="800px"
+      :close-on-click-modal="false"
+      :show-confirm-button="false"
+      @close="showSealDialog = false"
+    >
+      <div class="signature-grid">
+        <div
+          v-for="signature in availableTools.signatures"
+          :key="signature.id"
+          class="signature-item"
+          @click="selectSignature(signature)"
+        >
+          <div class="signature-preview">
+            <div
+              v-if="signature.svgData"
+              class="signature-svg"
+              v-html="signature.svgData"
+            ></div>
+            <div v-else class="signature-placeholder">
+              {{ signature.signatureName }}
+            </div>
+          </div>
+          <div class="signature-info">
+            <h4>{{ signature.signatureName }}</h4>
+            <p>{{ signature.createTime }}</p>
+            <p v-if="signature.description" class="signature-desc">
+              {{ signature.description }}
+            </p>
+            <span v-if="signature.isDefault" class="default-badge">默认</span>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+
+    <!-- 状态提示 -->
+    <div v-if="isSigningMode" class="signing-tip">
+      <div class="tip-content">
+        <span v-if="currentTool === 'seal' && selectedSeal">
+          点击文档任意位置添加印章："{{ selectedSeal.sealName }}"
+        </span>
+        <span v-else-if="currentTool === 'signature' && selectedSignature">
+          点击文档任意位置添加签名："{{ selectedSignature.signatureName }}"
+        </span>
+        <span v-else-if="currentTool === 'seal'"> 请先选择印章 </span>
+        <span v-else-if="currentTool === 'signature'"> 请先选择签名 </span>
+        <span v-else> 请选择工具并选择相应的印章或签名 </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.seal-demo-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #f5f7fa;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  background: white;
+  border-bottom: 1px solid #ebeef5;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+  .toolbar-title {
+    h2 {
+      margin: 0 0 4px 0;
+      color: #303133;
+    }
+    p {
+      margin: 0;
+      font-size: 14px;
+    }
+  }
+
+  .toolbar-actions {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+
+    .tool-selector {
+      display: flex;
+      gap: 4px;
+      border: 1px solid #dcdfe6;
+      border-radius: 6px;
+      padding: 4px;
+      background: #f8f9fa;
+    }
+  }
+}
+
+.document-container {
+  flex: 1;
+  overflow: auto;
+  padding: 24px;
+  background: #f5f7fa;
+}
+
+.document-content {
+  position: relative;
+  max-width: 210mm;
+  margin: 0 auto;
+  background: white;
+  padding: 40px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  min-height: 297mm;
+  font-family: '宋体', SimSun, serif;
+
+  &.signing-mode {
+    cursor: crosshair;
+  }
+
+  .document-header {
+    text-align: center;
+    margin-bottom: 30px;
+
+    h1 {
+      font-size: 24px;
+      font-weight: bold;
+      margin: 0 0 10px 0;
+      color: #303133;
+    }
+
+    h2 {
+      font-size: 20px;
+      font-weight: bold;
+      margin: 0 0 20px 0;
+      color: #303133;
+    }
+
+    .to-info {
+      text-align: left;
+      margin: 20px 0;
+      font-size: 14px;
+    }
+
+    .description {
+      text-align: left;
+      margin: 15px 0;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    .divider {
+      border: none;
+      border-top: 1px solid #303133;
+      margin: 20px 0;
+    }
+  }
+
+  .product-section {
+    margin-bottom: 30px;
+
+    h3 {
+      font-size: 16px;
+      font-weight: bold;
+      margin: 0 0 15px 0;
+    }
+  }
+
+  .product-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 14px;
+
+    th,
+    td {
+      border: 1px solid #303133;
+      padding: 8px;
+      text-align: center;
+    }
+
+    th {
+      background-color: #f8f9fa;
+      font-weight: bold;
+    }
+
+    td {
+      height: 32px;
+    }
+  }
+
+  .contact-section {
+    margin: 30px 0;
+
+    h3 {
+      font-size: 16px;
+      font-weight: bold;
+      margin: 0 0 15px 0;
+    }
+
+    .contact-info {
+      display: flex;
+      justify-content: space-between;
+      font-size: 14px;
+
+      .supplier,
+      .client {
+        flex: 1;
+
+        p {
+          margin: 8px 0;
+          line-height: 1.5;
+        }
+      }
+    }
+  }
+
+  .signature-section {
+    margin-top: 50px;
+    display: flex;
+    justify-content: flex-end;
+
+    .signature-right {
+      text-align: right;
+      font-size: 14px;
+
+      .seal-area {
+        margin-top: 20px;
+        min-height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+    }
+  }
+}
+
+// 统一位置标记样式（印章和签名）
+.position-marker {
+  position: absolute;
+  z-index: 100;
+  cursor: move;
+  border: 2px dashed #409eff;
+  border-radius: 4px;
+  user-select: none;
+
+  &:hover {
+    border-color: #67c23a;
+  }
+
+  &.signature-position {
+    border-color: #e6a23c;
+
+    &:hover {
+      border-color: #f56c6c;
+    }
+  }
+
+  .seal-image,
+  .signature-svg {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    pointer-events: none;
+  }
+
+  .seal-placeholder,
+  .signature-placeholder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    color: #909399;
+    background: rgba(64, 158, 255, 0.1);
+    border-radius: 4px;
+  }
+
+  .signature-placeholder {
+    background: rgba(230, 162, 60, 0.1);
+  }
+
+  .resize-handle {
+    position: absolute;
+    right: -4px;
+    bottom: -4px;
+    width: 8px;
+    height: 8px;
+    background: #409eff;
+    cursor: nw-resize;
+    border-radius: 2px;
+  }
+
+  &.signature-position .resize-handle {
+    background: #e6a23c;
+  }
+
+  .delete-btn {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    width: 20px;
+    height: 20px;
+    background: #f56c6c;
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 1;
+
+    &:hover {
+      background: #f78989;
+    }
+  }
+}
+
+// 已完成签署记录样式
+.signed-record {
+  position: absolute;
+  z-index: 50;
+
+  &.signed-seal .seal-image.signed,
+  &.signed-signature .signature-svg.signed {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    opacity: 0.9;
+  }
+
+  .signed-marker {
+    width: 100%;
+    height: 100%;
+    background: rgba(220, 53, 69, 0.1);
+    border: 2px solid #dc3545;
+    border-radius: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px;
+    color: #dc3545;
+    font-weight: bold;
+    text-align: center;
+
+    span {
+      line-height: 1.2;
+    }
+    small {
+      font-size: 8px;
+      margin-top: 2px;
+    }
+  }
+
+  &.signed-signature .signed-marker {
+    border-radius: 4px;
+    background: rgba(230, 162, 60, 0.1);
+    border-color: #e6a23c;
+    color: #e6a23c;
+  }
+}
+
+.seal-grid,
+.signature-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px;
+  max-height: 400px;
+  overflow-y: auto;
+
+  .seal-item,
+  .signature-item {
+    border: 1px solid #dcdfe6;
+    border-radius: 8px;
+    padding: 16px;
+    cursor: pointer;
+    transition: all 0.3s;
+    text-align: center;
+
+    &:hover {
+      border-color: #409eff;
+      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
+    }
+
+    .seal-preview,
+    .signature-preview {
+      margin-bottom: 12px;
+
+      img {
+        width: 60px;
+        height: 60px;
+        object-fit: contain;
+      }
+
+      .signature-svg {
+        width: 120px;
+        height: 60px;
+        margin: 0 auto;
+        border: 1px solid #ebeef5;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #fafafa;
+      }
+
+      .seal-placeholder,
+      .signature-placeholder {
+        width: 60px;
+        height: 60px;
+        background: #f5f7fa;
+        border: 2px dashed #dcdfe6;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        color: #909399;
+        margin: 0 auto;
+      }
+
+      .signature-placeholder {
+        border-radius: 4px;
+        width: 120px;
+        height: 60px;
+      }
+    }
+
+    .seal-info,
+    .signature-info {
+      h4 {
+        margin: 0 0 8px 0;
+        font-size: 14px;
+        color: #303133;
+      }
+
+      p {
+        margin: 4px 0;
+        font-size: 12px;
+        color: #606266;
+      }
+
+      .seal-desc,
+      .signature-desc {
+        color: #909399;
+        font-size: 11px;
+      }
+
+      .default-badge {
+        background: #67c23a;
+        color: white;
+        font-size: 10px;
+        padding: 2px 6px;
+        border-radius: 10px;
+        margin-top: 4px;
+        display: inline-block;
+      }
+    }
+  }
+
+  .signature-item:hover {
+    border-color: #e6a23c;
+    box-shadow: 0 2px 8px rgba(230, 162, 60, 0.2);
+  }
+}
+
+.signing-tip {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #409eff;
+  color: white;
+  padding: 12px 24px;
+  border-radius: 20px;
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+  z-index: 1000;
+
+  .tip-content {
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+
+// 打印样式
+@media print {
+  .toolbar,
+  .signing-tip,
+  .position-marker .resize-handle,
+  .position-marker .delete-btn {
+    display: none !important;
+  }
+
+  .document-container {
+    padding: 0;
+    background: white;
+  }
+
+  .document-content {
+    box-shadow: none;
+    margin: 0;
+    padding: 20px;
+  }
+
+  .position-marker {
+    border: none !important;
+  }
+}
+</style>