From 7eae23beca8fc59dbba6e345b4d8c573047c0e1b Mon Sep 17 00:00:00 2001
From: zhouxiaofeng <2946471396@qq.com>
Date: Mon, 15 Jun 2026 09:31:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8C=AA=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ContractPartyPlaceholderModal.vue         |   17 +-
 .../launch/components/mixedSignModal.vue      | 2681 ++++++++++++++++-
 2 files changed, 2681 insertions(+), 17 deletions(-)

diff --git a/src/views/contract/launch/components/ContractPartyPlaceholderModal.vue b/src/views/contract/launch/components/ContractPartyPlaceholderModal.vue
index 43750cf..1e64914 100644
--- a/src/views/contract/launch/components/ContractPartyPlaceholderModal.vue
+++ b/src/views/contract/launch/components/ContractPartyPlaceholderModal.vue
@@ -63,7 +63,11 @@
                       {{ party.displayName }}
                     </div>
                     <a-button
-                      v-if="!isViewMode && !isOurPartyLocked && ourParties.length > 1"
+                      v-if="
+                        !isViewMode &&
+                        !isOurPartyLocked &&
+                        ourParties.length > 1
+                      "
                       type="link"
                       danger
                       class="text-action-btn"
@@ -364,7 +368,11 @@
                   </div>
                   <div class="summary-line">
                     <span>相对方</span
-                    ><strong>{{ isSingleAgreementChecked ? "单方协议，无相对方" : counterpartySummaryText }}</strong>
+                    ><strong>{{
+                      isSingleAgreementChecked
+                        ? "单方协议，无相对方"
+                        : counterpartySummaryText
+                    }}</strong>
                   </div>
                 </div>
 
@@ -1002,7 +1010,6 @@
               </div>
             </div>
           </section>
-
         </a-form>
       </div>
 
@@ -1610,9 +1617,7 @@ const isSingleAgreementChecked = computed(
   () => String(detailState.value.isSingleAgreement || "0") === "1",
 );
 
-const isOurPartyLocked = computed(
-  () => isSingleAgreementChecked.value,
-);
+const isOurPartyLocked = computed(() => isSingleAgreementChecked.value);
 
 const ourParties = computed(
   () => detailState.value.partyState.ourPartyList || [],
diff --git a/src/views/contract/launch/components/mixedSignModal.vue b/src/views/contract/launch/components/mixedSignModal.vue
index 62ec957..09ecfa5 100644
--- a/src/views/contract/launch/components/mixedSignModal.vue
+++ b/src/views/contract/launch/components/mixedSignModal.vue
@@ -1,19 +1,2678 @@
 <template>
-  <BaseMixedSignModal ref="innerRef" @business-updated="emit('business-updated', $event)" />
+  <a-modal
+    v-model:open="visible"
+    :title="modalTitle"
+    width="95%"
+    :style="{ top: '30px', paddingBottom: 0 }"
+    :bodyStyle="{
+      height: 'calc(100vh - 180px)',
+      padding: 0,
+      overflow: 'hidden',
+    }"
+    :destroy-on-close="false"
+    :footer="null"
+    :mask-closable="false"
+    wrap-class-name="seal-full-modal"
+  >
+    <div class="sign-platform" @click="hideCtxMenu">
+      <div v-if="!contractId" class="platform-layout platform-layout-empty">
+        <div class="preview-area empty-preview">
+          <div class="preview-placeholder">
+            <cloud-upload-outlined
+              :style="{ fontSize: '48px', color: '#c0c4cc' }"
+            />
+            <p>上传文件后此处将显示文件预览</p>
+          </div>
+        </div>
+
+        <div class="operation-sidebar">
+          <div v-if="showBusinessContext" class="step-card">
+            <div class="step-card-header">
+              <span class="step-badge" style="background: #10b981">签</span>
+              <span class="step-title">在线签署上下文</span>
+            </div>
+            <div class="step-card-body">
+              <div class="business-meta-title">
+                {{ businessRecord?.contractName || "待签署合同" }}
+              </div>
+              <div class="business-meta-list">
+                <div
+                  v-for="item in businessInfoRows.slice(0, 6)"
+                  :key="'empty_' + item.label"
+                  class="business-meta-item"
+                >
+                  <span>{{ item.label }}</span>
+                  <strong>{{ item.value }}</strong>
+                </div>
+              </div>
+              
+            </div>
+          </div>
+
+          <div class="step-card">
+            <div class="step-card-header">
+              <span class="step-badge">1</span>
+              <span class="step-title">发起合约</span>
+            </div>
+            <div class="step-card-body">
+              <div
+                class="upload-dragger"
+                :class="{ 'is-dragover': dragOver }"
+                @click="triggerFileInput"
+                @dragover.prevent="dragOver = true"
+                @dragleave.prevent="dragOver = false"
+                @drop.prevent="handleFileDrop"
+              >
+                <input
+                  ref="fileInputRef"
+                  type="file"
+                  :accept="acceptTypes"
+                  style="display: none"
+                  @change="handleFileSelect"
+                />
+
+                <div v-if="!uploadFile" class="upload-content">
+                  <cloud-upload-outlined
+                    :style="{ fontSize: '36px', color: '#b0b8c5' }"
+                  />
+                  <p class="upload-text">点击或将文件拖拽到这里上传</p>
+                  <p class="upload-hint">
+                    支持 xls、xlsx、pdf、docx、doc 文件，且小于10M
+                  </p>
+                </div>
+
+                <div v-else class="upload-content">
+                  <file-text-outlined
+                    :style="{ fontSize: '36px', color: '#b0b8c5' }"
+                  />
+                  <p class="file-name">{{ uploadFile.name }}</p>
+                  <p class="file-size">{{ formatFileSize(uploadFile.size) }}</p>
+                  <div class="btn btn-danger-text" @click.stop="removeFile">
+                    移除文件
+                  </div>
+                </div>
+              </div>
+
+              <div class="contract-name-row">
+                <a-input
+                  v-model:value="contractName"
+                  placeholder="请输入合同/文件名称"
+                  allow-clear
+                />
+              </div>
+
+              <div
+                class="btn btn-primary"
+                :class="{
+                  'btn-disabled': (!uploadFile && !businessRecord?.id) || !contractName || creating,
+                }"
+                @click="businessRecord?.id && !uploadFile ? handleCreateContractFromBusinessFile() : handleCreateContract()"
+              >
+                <a-spin v-if="creating" size="small" />
+                <span v-if="creating"> 发起中...</span>
+                <span v-else>{{ businessRecord?.id && !uploadFile ? "使用合同正文发起签署" : "发起签署" }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="step-card step-card-disabled">
+            <div class="step-card-header">
+              <span class="step-badge">2</span>
+              <span class="step-title">获取印章并拖拽到文档</span>
+            </div>
+            <div class="step-card-body">
+              <p class="step-hint">发起合约后即可进入预盖章操作区</p>
+            </div>
+          </div>
+
+          <div class="step-card step-card-disabled">
+            <div class="step-card-header">
+              <span class="step-badge">3</span>
+              <span class="step-title">扫码确认预盖章</span>
+            </div>
+            <div class="step-card-body">
+              <p class="step-hint">一次扫码可确认当前全部待签署印章</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="platform-layout platform-layout-full">
+        <div class="left-info-sidebar">
+          <div
+            v-if="showBusinessContext"
+            class="info-card business-context-card"
+          >
+            <div class="info-title">业务签署信息</div>
+            <div class="business-tag-row">
+              <a-tag color="green">预盖章模式</a-tag>
+              <a-tag :color="businessStatusColor">{{
+                businessStatusLabel
+              }}</a-tag>
+            </div>
+            <div
+              v-for="item in businessInfoRows"
+              :key="item.label"
+              class="info-item"
+            >
+              <span>{{ item.label }}</span>
+              <strong :title="item.value">{{ item.value }}</strong>
+            </div>
+            <div class="context-note">
+              当前弹窗已简化为预盖章专用模式，建议流程：
+              先上传文件，获取印章，拖到指定位置，然后统一扫码确认。
+            </div>
+          </div>
+
+          <div class="info-card">
+            <div class="info-title">合同信息</div>
+            <div class="info-item">
+              <span>合同名称</span>
+              <strong>{{ contractName }}</strong>
+            </div>
+            <div class="info-item">
+              <span>合同状态</span>
+              <strong>{{ contractStatusText }}</strong>
+            </div>
+            <div class="info-item">
+              <span>文件页数</span>
+              <strong>{{ pdfImages.length }} 页</strong>
+            </div>
+            <div class="info-item">
+              <span>待签印章</span>
+              <strong>{{ pendingSealCount }} 个</strong>
+            </div>
+            <div class="info-item">
+              <span>已签印章</span>
+              <strong>{{ signedSealCount }} 个</strong>
+            </div>
+          </div>
+        </div>
+
+        <div class="preview-area" ref="pdfScrollRef">
+          <div
+            v-for="(imgUrl, idx) in pdfImages"
+            :key="'p' + idx"
+            class="pdf-page-wrapper"
+            :style="{
+              width: displayWidth + 'px',
+              height: displayHeight + 'px',
+            }"
+            @dragover.prevent
+            @drop.prevent="onDropSeal($event, idx + 1)"
+            @contextmenu.prevent.stop="showCtxMenu($event, idx + 1)"
+          >
+            <img
+              :src="imgUrl"
+              class="pdf-page-image"
+              :style="{
+                width: displayWidth + 'px',
+                height: displayHeight + 'px',
+              }"
+              draggable="false"
+            />
+
+            <div
+              v-for="seal in getPageSealItems(idx + 1)"
+              :key="'seal_' + seal.id"
+              class="placed-seal"
+              :class="{
+                'seal-signed': seal.status === 'signed',
+                'placed-ts': seal._type === 'timestamp',
+              }"
+              :style="getPlacedStyle(seal)"
+              @mousedown.stop="
+                seal.status !== 'signed' && startDragSeal($event, seal)
+              "
+            >
+              <img
+                v-if="seal.pictureUrl || seal._pictureUrl"
+                :src="seal.pictureUrl || seal._pictureUrl"
+                class="placed-seal-img"
+              />
+              <div v-else class="placed-seal-fallback">
+                {{
+                  seal.sealName ||
+                  (seal._type === "timestamp" ? "时间戳" : "印章")
+                }}
+              </div>
+
+              <div
+                v-if="seal._type === 'timestamp' && seal.status !== 'signed'"
+                class="ts-actions"
+              >
+                <div
+                  class="btn btn-primary btn-sm"
+                  :class="{ 'btn-loading': seal.status === 'signing' }"
+                  @click.stop="confirmTimestamp(seal)"
+                >
+                  {{ seal.status === "signing" ? "签署中..." : "确认" }}
+                </div>
+                <close-outlined
+                  class="placed-delete"
+                  @click.stop="removePlacedSeal(seal.id)"
+                />
+              </div>
+
+              <close-outlined
+                v-else-if="seal.status !== 'signed'"
+                class="placed-delete"
+                @click.stop="removePlacedSeal(seal.id)"
+              />
+            </div>
+
+            <div
+              class="paging-seal-wrapper"
+              :class="{
+                'paging-empty': !pagingSeal.sealId,
+                'paging-signed': pagingSigned,
+              }"
+              @click.stop="handlePagingSealClick"
+            >
+              <template v-if="!pagingSeal.sealId">
+                <div class="paging-empty-box">
+                  <div class="paging-empty-text">添加骑缝章</div>
+                </div>
+              </template>
+              <template v-else>
+                <div class="paging-seal-real">
+                  <img
+                    v-if="pagingSeal.pictureUrl"
+                    :src="pagingSeal.pictureUrl"
+                    class="paging-seal-img"
+                  />
+                  <div class="paging-seal-real-text">
+                    {{ pagingSeal.sealName || "骑缝章" }}
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+
+        <div class="operation-sidebar">
+          <div class="step-card">
+            <div class="step-card-header">
+              <span class="step-badge">2</span>
+              <span class="step-title">添加签章</span>
+              <span class="step-required">（必选项）</span>
+            </div>
+            <div class="step-card-body">
+              <div class="seal-query-section">
+                <div class="section-subtitle">1、获取签章</div>
+
+                <div class="form-item">
+                  <label>姓名 <span class="required">*</span></label>
+                  <a-input
+                    v-model:value="queryName"
+                    placeholder="请输入姓名"
+                    size="small"
+                  />
+                </div>
+
+                <div class="form-item">
+                  <label>手机号 / 身份证 <span class="required">*</span></label>
+                  <a-input
+                    v-model:value="queryIdOrMobile"
+                    placeholder="手机号或身份证号"
+                    size="small"
+                  />
+                </div>
+
+                <div class="form-item">
+                  <label>公司名称</label>
+                  <a-input
+                    v-model:value="queryEntName"
+                    placeholder="选填"
+                    size="small"
+                  />
+                </div>
+
+                <div class="form-item">
+                  <label>印章类型</label>
+                </div>
+
+                <a-checkbox-group
+                  v-model:value="querySealTypes"
+                  class="seal-type-checkboxes"
+                >
+                  <a-checkbox :value="0">个人章</a-checkbox>
+                  <a-checkbox :value="20">公章</a-checkbox>
+                  <a-checkbox :value="10">法人章</a-checkbox>
+                  <a-checkbox :value="30">财务章</a-checkbox>
+                  <a-checkbox :value="40">合同章</a-checkbox>
+                  <a-checkbox :value="50">发票章</a-checkbox>
+                  <a-checkbox :value="60">其他章</a-checkbox>
+                </a-checkbox-group>
+
+                <div
+                  class="btn btn-primary"
+                  :class="{
+                    'btn-disabled':
+                      !queryName || !queryIdOrMobile || fetchingSeals,
+                  }"
+                  @click="fetchSeals"
+                  style="width: 100%"
+                >
+                  <a-spin v-if="fetchingSeals" size="small" />
+                  <span v-if="fetchingSeals"> 获取中...</span>
+                  <span v-else>获取印章</span>
+                </div>
+              </div>
+
+              <div v-if="sealList.length > 0" class="seal-drag-section">
+                <div class="section-subtitle">
+                  2、拖动签章到文档上（{{ sealList.length }} 个）
+                </div>
+                <div class="seal-drag-list">
+                  <div
+                    v-for="seal in sealList"
+                    :key="seal.sealId"
+                    class="seal-drag-item"
+                    draggable="true"
+                    @dragstart="onDragSealStart($event, seal)"
+                  >
+                    <img :src="seal.pictureUrl" class="drag-seal-img" />
+                    <span class="drag-seal-name">{{ seal.sealName }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div v-if="sealList.length > 0" class="paging-section">
+                <div class="section-subtitle">骑缝章（可选）</div>
+                <div
+                  class="paging-drop-zone"
+                  @dragover.prevent
+                  @drop.prevent="onDropPaging($event)"
+                >
+                  <span v-if="!pagingSeal.sealId"
+                    >拖拽印章到这里设置骑缝章</span
+                  >
+                  <template v-else>
+                    <img
+                      v-if="pagingSeal.pictureUrl"
+                      :src="pagingSeal.pictureUrl"
+                      class="paging-seal-thumb"
+                    />
+                    <span>{{ pagingSeal.sealName }}</span>
+                    <close-outlined
+                      class="del-icon"
+                      @click.stop="clearPagingSeal"
+                    />
+                  </template>
+                </div>
+              </div>
+
+              <div
+                class="btn btn-success"
+                :class="{ 'btn-disabled': !canStartPreSign || preSigning }"
+                @click="handlePreSign"
+                style="width: 100%; margin-top: 10px"
+              >
+                <a-spin v-if="preSigning" size="small" />
+                <span v-if="preSigning"> 获取二维码中...</span>
+                <span v-else>
+                  确认预盖章（{{ pendingSealCount }} 个印章{{
+                    pagingSeal.sealId ? " + 骑缝章" : ""
+                  }}）
+                </span>
+              </div>
+
+              <p
+                v-if="sealItems.length > 0 || pagingSeal.sealId"
+                class="sign-hint"
+              >
+                提示：印章拖拽完成后，只需扫码一次即可统一确认当前预盖章。
+              </p>
+            </div>
+          </div>
+
+          <div class="step-card">
+            <div class="step-card-header">
+              <span class="step-badge">3</span>
+              <span class="step-title">添加时间戳（可选）</span>
+            </div>
+            <div class="step-card-body">
+              <div class="form-item">
+                <label>时间格式</label>
+                <a-select
+                  v-model:value="tsFormat"
+                  size="small"
+                  style="width: 100%"
+                >
+                  <a-select-option value="yyyy-MM-dd"
+                    >yyyy-MM-dd</a-select-option
+                  >
+                  <a-select-option value="yyyy年MM月dd日"
+                    >yyyy年MM月dd日</a-select-option
+                  >
+                  <a-select-option value="yyyy/MM/dd"
+                    >yyyy/MM/dd</a-select-option
+                  >
+                  <a-select-option value="yyyy-MM-dd HH:mm:ss"
+                    >yyyy-MM-dd HH:mm:ss</a-select-option
+                  >
+                </a-select>
+              </div>
+
+              <div
+                class="btn btn-primary"
+                :class="{ 'btn-disabled': tsLoading }"
+                @click="fetchTimestamp"
+                style="width: 100%"
+              >
+                <a-spin v-if="tsLoading" size="small" />
+                <span v-if="tsLoading"> 获取中...</span>
+                <span v-else>获取时间戳</span>
+              </div>
+
+              <div v-if="tsImageUrl" class="ts-drag-area">
+                <div
+                  class="ts-drag-item"
+                  draggable="true"
+                  @dragstart="onDragTimestampStart"
+                >
+                  <img :src="tsImageUrl" class="drag-seal-img" />
+                  <span>拖拽时间戳到文档上</span>
+                </div>
+                <p class="ts-hint">也可以在文档页面上右键，直接添加时间戳。</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="step-card">
+            <div class="step-card-header">
+              <span class="step-badge">4</span>
+              <span class="step-title">结束合约</span>
+            </div>
+            <div class="step-card-body">
+              <div class="complete-form-grid">
+                <div class="complete-form-item">
+                  <div class="complete-form-label">签订日期</div>
+                  <a-date-picker
+                    v-model:value="completeSignDate"
+                    value-format="YYYY-MM-DD"
+                    style="width: 100%"
+                    placeholder="请选择签订日期"
+                  />
+                </div>
+                <div class="complete-form-item">
+                  <div class="complete-form-label">用印时间</div>
+                  <a-date-picker
+                    v-model:value="completeSealDate"
+                    value-format="YYYY-MM-DD"
+                    style="width: 100%"
+                    placeholder="请选择用印时间"
+                  />
+                </div>
+                <div class="complete-form-item">
+                  <div class="complete-form-label">合同生效日期</div>
+                  <a-date-picker
+                    v-model:value="completeActiveDate"
+                    value-format="YYYY-MM-DD"
+                    style="width: 100%"
+                    placeholder="请选择合同生效日期"
+                  />
+                </div>
+              </div>
+
+              <div
+                class="btn btn-success"
+                :class="{
+                  'btn-disabled': contractStatus === 2000 || completing,
+                }"
+                @click="handleCompleteContract"
+              >
+                <check-circle-outlined />
+                <span v-if="completing">结束中...</span>
+                <span v-else>结束合约</span>
+              </div>
+
+              <div
+                class="btn btn-primary"
+                :class="{ 'btn-disabled': contractStatus !== 2000 }"
+                @click="handleDownloadContract"
+                style="margin-top: 10px; margin-left: 10px"
+              >
+                <download-outlined />
+                下载已签署文件
+              </div>
+
+              <div class="contract-status-tag">
+                <span v-if="contractStatus === 2000" class="tag-success"
+                  >合约已完成</span
+                >
+                <span v-else-if="contractStatus === 20" class="tag-warning"
+                  >签署进行中</span
+                >
+                <span v-else class="tag-info">等待签署</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-show="ctxVisible"
+        class="ctx-menu-mask"
+        @click="hideCtxMenu"
+        @contextmenu.prevent="hideCtxMenu"
+      ></div>
+
+      <div
+        v-show="ctxVisible"
+        class="ctx-menu-panel"
+        :style="{ left: ctxX + 'px', top: ctxY + 'px' }"
+      >
+        <div class="ctx-menu-item" @click.stop="ctxAddTimestamp">
+          <clock-circle-outlined />
+          添加时间戳
+        </div>
+      </div>
+
+      <a-modal
+        v-model:open="qrVisible"
+        title="扫码确认预盖章"
+        width="420px"
+        :mask-closable="false"
+        :footer="null"
+        :closable="false"
+      >
+        <div class="qr-dialog-body">
+          <div v-if="qrCode" class="qr-img-box">
+            <img :src="qrCode" class="qr-img" />
+          </div>
+          <div v-else class="qr-img-box qr-loading">
+            <a-spin size="large" />
+            <p>二维码加载中...</p>
+          </div>
+
+          <a-alert
+            message="请使用微信扫描二维码完成预盖章确认"
+            type="success"
+            :closable="false"
+            show-icon
+            style="margin-top: 12px"
+          />
+
+          <div v-if="qrCount > 0" class="qr-countdown">
+            <a-progress
+              :percent="qrPercent"
+              :stroke-color="qrColor"
+              :stroke-width="6"
+              :show-info="false"
+            />
+            <p class="countdown-text">
+              有效期剩余：<span :style="{ color: qrColor }">{{ qrText }}</span>
+            </p>
+          </div>
+        </div>
+
+        <div style="text-align: right; margin-top: 16px">
+          <a-button @click="closeQrDialog" style="margin-right: 8px"
+            >关闭</a-button
+          >
+          <a-button
+            type="primary"
+            :loading="qrRefreshing"
+            @click="refreshQrCode"
+          >
+            刷新二维码
+          </a-button>
+        </div>
+      </a-modal>
+    </div>
+  </a-modal>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import BaseMixedSignModal from '../../../seal/mixedSignModal.vue'
+import {
+  ref,
+  reactive,
+  computed,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  watch,
+} from "vue";
+import { message, Modal } from "ant-design-vue";
+import {
+  CloudUploadOutlined,
+  FileTextOutlined,
+  ClockCircleOutlined,
+  CloseOutlined,
+  CheckCircleOutlined,
+  DownloadOutlined,
+} from "@ant-design/icons-vue";
+import {
+  startContract,
+  getPreSignQrCode,
+  completeContract,
+  downloadContract,
+  pollCallback,
+  getTimestamp,
+  signTimestamp,
+  getContractDetail,
+  previewContract,
+  getUserUniqueId,
+  getSealBySignerId,
+} from "@/api/seal";
+import {
+  finishLaunchSeal,
+  downloadLaunchFile,
+  saveLaunchSealInfo,
+} from "@/api/launch.js";
 
-const emit = defineEmits(['business-updated'])
-const innerRef = ref(null)
-
-function showModal(...args) {
-  return innerRef.value?.showModal(...args)
+const SUCCESS_CODE = "0000";
+const CALLBACK_HOST = "http://47.110.50.12:7005";
+const STORAGE_KEY_PREFIX = "mixed_presign_contract";
+function getStorageKey(record) {
+  const id = record?.id || record?.contractCode || "";
+  return id ? `${STORAGE_KEY_PREFIX}_${id}` : STORAGE_KEY_PREFIX;
 }
 
-defineExpose({
-  showModal,
-})
+function isSuccessResponse(res) {
+  return String(res?.code || "") === SUCCESS_CODE;
+}
+
+function getResponseResult(res) {
+  return res?.result;
+}
+
+function getResponseMessage(res, fallback = "操作失败") {
+  return res?.message || res?.msg || fallback;
+}
+
+const visible = ref(false);
+const businessRecord = ref(null);
+const emit = defineEmits(["business-updated"]);
+const completeSignDate = ref("");
+const completeSealDate = ref("");
+const completeActiveDate = ref("");
+
+const businessStatusLabelMap = {
+  draft: "草稿",
+  reviewing: "审批中",
+  rejected: "审批驳回",
+  pending_sign: "待签署",
+  signing: "签署中",
+  completed: "已完成",
+};
+
+const businessStatusColorMap = {
+  draft: "default",
+  reviewing: "processing",
+  rejected: "error",
+  pending_sign: "warning",
+  signing: "purple",
+  completed: "success",
+};
+
+const businessScopeLabelMap = {
+  personal: "个人级",
+  company: "公司级",
+  admin: "管理员级",
+};
+
+const showBusinessContext = computed(() => !!businessRecord.value);
+
+const businessStatusLabel = computed(() => {
+  const status = businessRecord.value?.status;
+  return businessStatusLabelMap[status] || "待签署";
+});
+
+const businessStatusColor = computed(() => {
+  const status = businessRecord.value?.status;
+  return businessStatusColorMap[status] || "default";
+});
+
+const businessInfoRows = computed(() => {
+  const record = businessRecord.value;
+  if (!record) return [];
+
+  const rows = [
+    ["合同编码", record.contractCode],
+    ["合同类型", record.contractType],
+    ["所选模板", record.templateName],
+    ["合同金额", formatBusinessAmount(record.contractAmount)],
+    ["发起人", record.initiator],
+    ["所属部门", record.initiatorDept],
+    ["查询级别", businessScopeLabelMap[record.queryScope] || record.queryScope],
+    ["相对方", record.counterpartySummary],
+  ];
+
+  return rows
+    .filter(
+      ([, value]) => value !== undefined && value !== null && value !== "",
+    )
+    .map(([label, value]) => ({ label, value: String(value) }));
+});
+
+function formatBusinessAmount(value) {
+  if (value === undefined || value === null || value === "") return "";
+  return `${new Intl.NumberFormat("zh-CN", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(Number(value))} 元`;
+}
+
+function todayString() {
+  const now = new Date();
+  const month = String(now.getMonth() + 1).padStart(2, "0");
+  const day = String(now.getDate()).padStart(2, "0");
+  return `${now.getFullYear()}-${month}-${day}`;
+}
+
+function sliceDateValue(value) {
+  return value ? String(value).slice(0, 10) : "";
+}
+
+function formatDateTimeValue(value) {
+  return value ? `${value} 00:00:00` : null;
+}
+
+function normalizePdfPreviewImages(list = []) {
+  return (Array.isArray(list) ? list : [])
+    .map((item) => {
+      if (typeof item === "string") return item;
+      if (!item || typeof item !== "object") return "";
+      return (
+        item.url ||
+        item.imageUrl ||
+        item.previewUrl ||
+        item.fileUrl ||
+        item.path ||
+        ""
+      );
+    })
+    .filter(Boolean);
+}
+
+function syncCompletionDates(record = {}) {
+  completeSignDate.value = sliceDateValue(record?.signDate) || todayString();
+  completeSealDate.value = sliceDateValue(record?.sealDate) || completeSignDate.value;
+  completeActiveDate.value = sliceDateValue(record?.activeDate) || sliceDateValue(record?.effectiveStart);
+}
+
+function validateCompletionDates() {
+  if (!completeSignDate.value) {
+    return "请选择签订日期";
+  }
+  if (!completeSealDate.value) {
+    return "请选择用印时间";
+  }
+  if (!completeActiveDate.value) {
+    return "请选择合同生效日期";
+  }
+  if (businessRecord.value?.contractPeriodType === "0") {
+    const start = sliceDateValue(businessRecord.value?.effectiveStart);
+    const end = sliceDateValue(businessRecord.value?.effectiveEnd);
+    if (start && completeActiveDate.value < start) {
+      return "合同生效日期不能早于合同开始日期";
+    }
+    if (end && completeActiveDate.value > end) {
+      return "合同生效日期不能晚于合同结束日期";
+    }
+  }
+  return "";
+}
+
+function mapBusinessStatusToContractStatus(status) {
+  if (status === "completed") return 2000;
+  if (status === "signing") return 20;
+  if (status === "pending_sign") return 10;
+  return null;
+}
+
+function mapContractStatusToBusinessStatus(status) {
+  if (status === 2000) return "completed";
+  if (status === 20) return "signing";
+  if (status === 10) return "pending_sign";
+  return businessRecord.value?.status || "pending_sign";
+}
+
+function getBusinessCacheKey(record) {
+  return String(
+    record?.contractCode || record?.id || record?.contractName || "",
+  );
+}
+
+function getCurrentStorageKey() {
+  return getStorageKey(businessRecord.value);
+}
+
+function updateBusinessStatusByContractStatus(status) {
+  if (!businessRecord.value || status === undefined || status === null) return;
+  businessRecord.value = {
+    ...businessRecord.value,
+    status: mapContractStatusToBusinessStatus(status),
+  };
+}
+
+const modalTitle = computed(() => {
+  return (
+    businessRecord.value?.contractName || contractName.value || "预盖章模式"
+  );
+});
+
+const contractStatusText = computed(() => {
+  if (contractStatus.value === 2000) return "已完成";
+  if (contractStatus.value === 20) return "签署中";
+  return "待签署";
+});
+
+function restoreContractState(saved) {
+  contractId.value = saved.contractId || "";
+  contractName.value = saved.contractName || contractName.value;
+  contractStatus.value = saved.contractStatus ?? contractStatus.value;
+  pdfImages.value = saved.pdfImages || [];
+  imageWidth.value = saved.imageWidth || 793;
+  imageHeight.value = saved.imageHeight || 1122;
+  updateBusinessStatusByContractStatus(contractStatus.value);
+}
+
+function saveContractState() {
+  try {
+    localStorage.setItem(
+      getCurrentStorageKey(),
+      JSON.stringify({
+        contractId: contractId.value,
+        contractName: contractName.value,
+        contractStatus: contractStatus.value,
+        pdfImages: pdfImages.value,
+        imageWidth: imageWidth.value,
+        imageHeight: imageHeight.value,
+        businessKey: getBusinessCacheKey(businessRecord.value),
+      }),
+    );
+  } catch {}
+}
+
+function clearContractState() {
+  try {
+    localStorage.removeItem(getCurrentStorageKey());
+  } catch {}
+}
+
+function getBusinessBodyFile(record = {}) {
+  const bodyFile =
+    (record.fileList || []).find((item) => item.fileCategory === "body") || {};
+  return {
+    fileName:
+      record.contractTextFileName ||
+      record.contractBodyFileName ||
+      bodyFile.fileName ||
+      `${record.contractName || "合同正文"}.docx`,
+    filePath:
+      record.contractTextFilePath ||
+      record.contractBodyFilePath ||
+      bodyFile.filePath ||
+      "",
+    fileType:
+      record.contractTextFileType ||
+      record.contractBodyFileType ||
+      bodyFile.fileType ||
+      "docx",
+  };
+}
+
+async function buildBusinessBodyUploadFile(record = {}) {
+  const bodyFile = getBusinessBodyFile(record);
+  if (!bodyFile.filePath) {
+    return null;
+  }
+  const response = await downloadLaunchFile(bodyFile.filePath);
+  const buffer = response?.data ?? response;
+  if (!buffer) {
+    throw new Error("合同正文下载结果为空");
+  }
+  const type =
+    String(bodyFile.fileType || "").toLowerCase() === "pdf"
+      ? "application/pdf"
+      : "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+  return new File([buffer], bodyFile.fileName, { type });
+}
+
+function buildSignedFileInfo(downloadData = {}) {
+  const signedUrl = downloadData.downloadUrl || downloadData.url || "";
+  const signedName =
+    downloadData.fileName ||
+    `${businessRecord.value?.contractName || contractName.value || "已签署合同"}.pdf`;
+  return {
+    signedFileName: signedName,
+    signedFilePath: signedUrl || contractId.value || "",
+    signedFileType: signedName.split(".").pop()?.toLowerCase() || "pdf",
+    signedFileSize: downloadData.fileSize || downloadData.size || null,
+  };
+}
+
+async function writeBackLaunchSealFinished(status = 2000) {
+  if (!businessRecord.value?.id) {
+    return;
+  }
+  let signedFileInfo = {};
+  try {
+    const downloadRes = await downloadContract(contractId.value);
+    if (isSuccessResponse(downloadRes) && getResponseResult(downloadRes)) {
+      signedFileInfo = buildSignedFileInfo(getResponseResult(downloadRes));
+    }
+  } catch {}
+
+  const res = await finishLaunchSeal(businessRecord.value.id, {
+    sealContractId: contractId.value,
+    sealContractStatus: status,
+    signDate: formatDateTimeValue(completeSignDate.value),
+    sealDate: formatDateTimeValue(completeSealDate.value),
+    activeDate: formatDateTimeValue(completeActiveDate.value),
+    ...signedFileInfo,
+  });
+
+  if (isSuccessResponse(res) && getResponseResult(res)) {
+    businessRecord.value = { ...businessRecord.value, ...getResponseResult(res) };
+    emit("business-updated", getResponseResult(res));
+  }
+}
+
+function resetSealPlacementState() {
+  sealItems.value = [];
+  sealPlacedId = 0;
+  pagingSigned.value = false;
+  Object.assign(pagingSeal, { sealId: "", sealName: "", pictureUrl: "" });
+  dragSealData = null;
+}
+
+function resetModalState(record = null) {
+  businessRecord.value = record ? { ...record } : null;
+  syncCompletionDates(record || {});
+  contractId.value = "";
+  contractStatus.value = mapBusinessStatusToContractStatus(record?.status);
+  pdfImages.value = [];
+  imageWidth.value = 793;
+  imageHeight.value = 1122;
+  uploadFile.value = null;
+  contractName.value = record?.contractName || "";
+  creating.value = false;
+  dragOver.value = false;
+  queryName.value = "";
+  queryIdOrMobile.value = "";
+  queryEntName.value = "";
+  querySealTypes.value = [0, 20, 10, 30, 40, 50, 60];
+  fetchingSeals.value = false;
+  sealList.value = [];
+  resetSealPlacementState();
+  tsImageUrl.value = "";
+  tsData.value = null;
+  tsFormat.value = "yyyy-MM-dd";
+  tsLoading.value = false;
+  qrVisible.value = false;
+  qrCode.value = "";
+  qrRequestId.value = "";
+  qrExpiresIn.value = 300;
+  qrRefreshing.value = false;
+  stopQrCountdown();
+  stopPolling();
+  hideCtxMenu();
+  if (fileInputRef.value) fileInputRef.value.value = "";
+}
+
+async function showModal(contractIdParam, businessRecordParam) {
+  let contractIdToLoad = "";
+  let contextRecord = null;
+
+  if (contractIdParam && typeof contractIdParam === "object") {
+    contextRecord = contractIdParam;
+    contractIdToLoad =
+      contractIdParam.sealContractId ||
+      contractIdParam.signContractId ||
+      contractIdParam.contractId ||
+      "";
+  } else {
+    contractIdToLoad = contractIdParam || "";
+    contextRecord = businessRecordParam || null;
+  }
+
+  visible.value = true;
+  resetModalState(contextRecord);
+
+  if (contractIdToLoad) {
+    await loadContract(contractIdToLoad);
+    await nextTick();
+    calcDisplaySize();
+    return;
+  }
+
+  if (contextRecord) {
+    try {
+      const key = getStorageKey(contextRecord);
+      const saved = JSON.parse(localStorage.getItem(key) || "{}");
+      const savedBusinessKey = saved.businessKey || "";
+      const currentBusinessKey = getBusinessCacheKey(contextRecord);
+      if (
+        saved.contractId &&
+        savedBusinessKey &&
+        savedBusinessKey === currentBusinessKey
+      ) {
+        restoreContractState(saved);
+        await nextTick();
+        calcDisplaySize();
+      }
+    } catch {}
+  }
+}
+
+defineExpose({ showModal });
+
+const fileInputRef = ref(null);
+const uploadFile = ref(null);
+const contractName = ref("");
+const creating = ref(false);
+const dragOver = ref(false);
+const acceptTypes = ".xls,.xlsx,.pdf,.docx,.doc";
+
+function triggerFileInput() {
+  fileInputRef.value?.click();
+}
+
+function handleFileSelect(e) {
+  const file = e.target.files?.[0];
+  if (file) validateFile(file);
+  e.target.value = "";
+}
+
+function handleFileDrop(e) {
+  dragOver.value = false;
+  const file = e.dataTransfer.files?.[0];
+  if (file) validateFile(file);
+}
+
+function validateFile(file) {
+  const ext = file.name.split(".").pop()?.toLowerCase();
+  if (!["xls", "xlsx", "pdf", "docx", "doc"].includes(ext)) {
+    message.error(`不支持 "${ext}" 格式`);
+    return;
+  }
+  if (file.size > 10 * 1024 * 1024) {
+    message.error("文件不能超过 10MB");
+    return;
+  }
+  uploadFile.value = file;
+  if (!contractName.value) {
+    contractName.value = file.name.replace(/\.[^.]+$/, "");
+  }
+}
+
+function removeFile() {
+  uploadFile.value = null;
+  if (fileInputRef.value) fileInputRef.value.value = "";
+}
+
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+const contractId = ref("");
+const contractStatus = ref(null);
+const pdfImages = ref([]);
+const imageWidth = ref(793);
+const imageHeight = ref(1122);
+const completing = ref(false);
+
+async function loadContract(cid) {
+  try {
+    const [detailRes, previewRes] = await Promise.all([
+      getContractDetail(cid),
+      previewContract(cid),
+    ]);
+
+    const detail = isSuccessResponse(detailRes)
+      ? getResponseResult(detailRes)
+      : null;
+    const preview = isSuccessResponse(previewRes)
+      ? getResponseResult(previewRes)
+      : null;
+
+    if (detail || preview) {
+      contractId.value = cid;
+      contractName.value = detail?.contractName || contractName.value;
+      contractStatus.value =
+        detail?.contractStatus ?? detail?.status ?? contractStatus.value;
+      pdfImages.value = normalizePdfPreviewImages(preview?.pdfToImageList);
+      imageWidth.value = Number(preview?.imageWidth) || 793;
+      imageHeight.value = Number(preview?.imageHeight) || 1122;
+      updateBusinessStatusByContractStatus(contractStatus.value);
+      saveContractState();
+    }
+  } catch {
+    try {
+      const saved = JSON.parse(localStorage.getItem(getCurrentStorageKey()) || "{}");
+      if (saved.contractId === cid) {
+        restoreContractState(saved);
+      }
+    } catch {}
+  }
+}
+
+async function handleCreateContract() {
+  if (!uploadFile.value || !contractName.value) {
+    message.warning("请先选择文件并输入合同名称");
+    return;
+  }
+
+  creating.value = true;
+  try {
+    const formData = new FormData();
+    formData.append("file", uploadFile.value);
+    formData.append("contractName", contractName.value);
+
+    const res = await startContract(formData);
+    if (!isSuccessResponse(res) || !getResponseResult(res)) {
+      message.error(getResponseMessage(res, "创建签署流程失败"));
+      return;
+    }
+
+    const data = getResponseResult(res);
+    contractId.value = data.contractId || "";
+    pdfImages.value = normalizePdfPreviewImages(data.pdfToImageList);
+    imageWidth.value = Number(data.imageWidth) || 793;
+    imageHeight.value = Number(data.imageHeight) || 1122;
+    contractStatus.value = 10;
+    updateBusinessStatusByContractStatus(contractStatus.value);
+    if (businessRecord.value?.id) {
+      await saveLaunchSealInfo(businessRecord.value.id, {
+        sealContractId: contractId.value,
+        sealContractStatus: contractStatus.value,
+      });
+    }
+    saveContractState();
+    message.success("签署流程创建成功，请继续获取印章并拖拽到文档上");
+    await nextTick();
+    calcDisplaySize();
+  } catch {
+    message.error("创建签署流程失败");
+  } finally {
+    creating.value = false;
+  }
+}
+
+async function handleCreateContractFromBusinessFile() {
+  if (!businessRecord.value) {
+    return;
+  }
+  creating.value = true;
+  try {
+    const bodyUploadFile = await buildBusinessBodyUploadFile(businessRecord.value);
+    if (!bodyUploadFile) {
+      message.warning("当前合同没有已保存的正文文件，请先在合同发起弹窗中配置正文");
+      return;
+    }
+    uploadFile.value = bodyUploadFile;
+    if (!contractName.value) {
+      contractName.value =
+        businessRecord.value.contractName || bodyUploadFile.name.replace(/\.[^.]+$/, "");
+    }
+    await handleCreateContract();
+  } catch {
+    message.error("读取后端合同正文失败，请检查正文文件是否存在");
+  } finally {
+    creating.value = false;
+  }
+}
+
+const pdfScrollRef = ref(null);
+const displayWidth = ref(700);
+const displayHeight = ref(990);
+const scaleRatio = ref(1);
+
+function calcDisplaySize() {
+  if (!pdfScrollRef.value) return;
+  const containerWidth = pdfScrollRef.value.clientWidth - 40;
+  const maxWidth = Math.min(containerWidth, 800);
+  if (imageWidth.value > 0) {
+    scaleRatio.value = maxWidth / imageWidth.value;
+    displayWidth.value = maxWidth;
+    displayHeight.value = Math.round(imageHeight.value * scaleRatio.value);
+  }
+}
+
+const queryName = ref("");
+const queryIdOrMobile = ref("");
+const queryEntName = ref("");
+const querySealTypes = ref([0, 20, 10, 30, 40, 50, 60]);
+const fetchingSeals = ref(false);
+const sealList = ref([]);
+
+async function fetchSeals() {
+  if (!queryName.value || !queryIdOrMobile.value) {
+    message.warning("请先填写姓名和手机号 / 身份证");
+    return;
+  }
+
+  fetchingSeals.value = true;
+  try {
+    const signerRes = await getUserUniqueId({
+      name: queryName.value,
+      mobile: /^\d{11}$/.test(queryIdOrMobile.value)
+        ? queryIdOrMobile.value
+        : "",
+      idCode: /^\d{15,18}[0-9Xx]?$/.test(queryIdOrMobile.value)
+        ? queryIdOrMobile.value
+        : "",
+    });
+
+    if (
+      !isSuccessResponse(signerRes) ||
+      !getResponseResult(signerRes)?.signerId
+    ) {
+      message.error(getResponseMessage(signerRes, "获取身份编码失败"));
+      return;
+    }
+
+    const signerId = getResponseResult(signerRes).signerId;
+    const sealRes = await getSealBySignerId({
+      signerId,
+      sealTypes: querySealTypes.value,
+      entName: queryEntName.value,
+    });
+
+    if (!isSuccessResponse(sealRes)) {
+      message.error(getResponseMessage(sealRes, "获取印章失败"));
+      return;
+    }
+
+    const result = getResponseResult(sealRes);
+    sealList.value = Array.isArray(result) ? result : [];
+    if (sealList.value.length) {
+      message.success(`成功获取 ${sealList.value.length} 个印章`);
+    } else {
+      message.warning("未获取到可用印章");
+    }
+  } catch {
+    message.error("获取印章失败");
+  } finally {
+    fetchingSeals.value = false;
+  }
+}
+
+const sealItems = ref([]);
+let sealPlacedId = 0;
+let dragSealData = null;
+
+const pagingSigned = ref(false);
+const pagingSeal = reactive({
+  sealId: "",
+  sealName: "",
+  pictureUrl: "",
+});
+
+const pendingSealCount = computed(() => {
+  return sealItems.value.filter(
+    (item) => item._type === "seal" && item.status === "pending",
+  ).length;
+});
+
+const signedSealCount = computed(() => {
+  return sealItems.value.filter(
+    (item) => item._type === "seal" && item.status === "signed",
+  ).length;
+});
+
+const canStartPreSign = computed(() => {
+  return pendingSealCount.value > 0 || !!pagingSeal.sealId;
+});
+
+function onDragSealStart(e, seal) {
+  dragSealData = {
+    _type: "seal",
+    sealId: seal.sealId,
+    sealName: seal.sealName,
+    pictureUrl: seal.pictureUrl,
+    owner: seal.owner || "",
+  };
+  e.dataTransfer.effectAllowed = "copy";
+  e.dataTransfer.setData("text/plain", seal.sealId || "seal");
+}
+
+function onDragTimestampStart(e) {
+  dragSealData = {
+    _type: "timestamp",
+    sealId: null,
+    sealName: "时间戳",
+    pictureUrl: tsData.value?.pictureUrl || "",
+    _pictureUrl: tsData.value?.pictureUrl || "",
+  };
+  e.dataTransfer.effectAllowed = "copy";
+  e.dataTransfer.setData("text/plain", "timestamp");
+}
+
+function onDropSeal(e, pageNum) {
+  if (!dragSealData) return;
+
+  const rect = e.currentTarget.getBoundingClientRect();
+  const x =
+    Math.round(((e.clientX - rect.left) / scaleRatio.value) * 100) / 100;
+  const y = Math.round(((e.clientY - rect.top) / scaleRatio.value) * 100) / 100;
+
+  sealItems.value.push({
+    id: ++sealPlacedId,
+    _type: dragSealData._type,
+    sealId: dragSealData.sealId,
+    sealName: dragSealData.sealName,
+    pictureUrl: dragSealData.pictureUrl,
+    _pictureUrl: dragSealData._pictureUrl || dragSealData.pictureUrl,
+    owner: dragSealData.owner || "",
+    pageNum,
+    x,
+    y,
+    scale: 1,
+    status: "pending",
+  });
+
+  if (dragSealData._type === "seal") {
+    dragSealData = null;
+  }
+}
+
+function getPageSealItems(pageNum) {
+  return sealItems.value.filter((item) => item.pageNum === pageNum);
+}
+
+function getPlacedStyle(seal) {
+  return {
+    left: `${seal.x * scaleRatio.value}px`,
+    top: `${seal.y * scaleRatio.value}px`,
+  };
+}
+
+function removePlacedSeal(id) {
+  const target = sealItems.value.find((item) => item.id === id);
+  if (target?.status === "signed") {
+    message.warning("已签署的内容不可删除");
+    return;
+  }
+  sealItems.value = sealItems.value.filter((item) => item.id !== id);
+}
+
+function handlePagingSealClick() {
+  if (pagingSigned.value) {
+    message.warning("骑缝章已签署");
+    return;
+  }
+  if (!pagingSeal.sealId) {
+    message.info("请从右侧印章列表拖拽一个印章到骑缝章区域");
+  }
+}
+
+function onDropPaging() {
+  if (!dragSealData || dragSealData._type !== "seal") return;
+  pagingSigned.value = false;
+  Object.assign(pagingSeal, {
+    sealId: dragSealData.sealId,
+    sealName: dragSealData.sealName,
+    pictureUrl: dragSealData.pictureUrl,
+  });
+  dragSealData = null;
+  message.success(`已设置骑缝章：${pagingSeal.sealName}`);
+}
+
+function clearPagingSeal() {
+  Object.assign(pagingSeal, {
+    sealId: "",
+    sealName: "",
+    pictureUrl: "",
+  });
+  pagingSigned.value = false;
+}
+
+let draggingSeal = null;
+let dragStartX = 0;
+let dragStartY = 0;
+let originX = 0;
+let originY = 0;
+
+function startDragSeal(e, seal) {
+  e.preventDefault();
+  draggingSeal = seal;
+  dragStartX = e.clientX;
+  dragStartY = e.clientY;
+  originX = seal.x;
+  originY = seal.y;
+
+  const onMouseMove = (event) => {
+    if (!draggingSeal) return;
+    draggingSeal.x =
+      Math.round(
+        (originX + (event.clientX - dragStartX) / scaleRatio.value) * 100,
+      ) / 100;
+    draggingSeal.y =
+      Math.round(
+        (originY + (event.clientY - dragStartY) / scaleRatio.value) * 100,
+      ) / 100;
+  };
+
+  const onMouseUp = () => {
+    draggingSeal = null;
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+  };
+
+  document.addEventListener("mousemove", onMouseMove);
+  document.addEventListener("mouseup", onMouseUp);
+}
+
+const qrVisible = ref(false);
+const qrCode = ref("");
+const qrRequestId = ref("");
+const qrExpiresIn = ref(300);
+const qrRefreshing = ref(false);
+const qrCount = ref(0);
+const preSigning = ref(false);
+let qrTimer = null;
+let pollTimer = null;
+
+const qrPercent = computed(() => {
+  return qrExpiresIn.value
+    ? Math.round((qrCount.value / qrExpiresIn.value) * 100)
+    : 0;
+});
+
+const qrColor = computed(() => {
+  if (qrCount.value <= 30) return "#f56c6c";
+  if (qrCount.value <= 60) return "#e6a23c";
+  return "#67c23a";
+});
+
+const qrText = computed(() => {
+  const minute = Math.floor(qrCount.value / 60);
+  const second = qrCount.value % 60;
+  return `${minute}分${String(second).padStart(2, "0")}秒`;
+});
+
+function startQrCountdown() {
+  stopQrCountdown();
+  qrCount.value = qrExpiresIn.value;
+  qrTimer = setInterval(() => {
+    qrCount.value -= 1;
+    if (qrCount.value <= 0) stopQrCountdown();
+  }, 1000);
+}
+
+function stopQrCountdown() {
+  if (qrTimer) {
+    clearInterval(qrTimer);
+    qrTimer = null;
+  }
+}
+
+function closeQrDialog() {
+  stopQrCountdown();
+  stopPolling();
+  qrVisible.value = false;
+  sealItems.value
+    .filter((item) => item._type === "seal" && item.status === "signing")
+    .forEach((item) => {
+      item.status = "pending";
+    });
+}
+
+function startPolling(requestId) {
+  stopPolling();
+  const maxAttempts = Math.ceil(qrExpiresIn.value / 2) + 10;
+  let attempts = 0;
+
+  pollTimer = setInterval(async () => {
+    attempts += 1;
+    if (attempts > maxAttempts || !qrVisible.value) {
+      stopPolling();
+      return;
+    }
+
+    try {
+      const res = await pollCallback(requestId);
+      if (isSuccessResponse(res) && getResponseResult(res)) {
+        stopPolling();
+        handlePreSignCallback(getResponseResult(res));
+      }
+    } catch {}
+  }, 2000);
+}
+
+function stopPolling() {
+  if (pollTimer) {
+    clearInterval(pollTimer);
+    pollTimer = null;
+  }
+}
+
+async function handlePreSign() {
+  const pendingSeals = sealItems.value.filter(
+    (item) => item._type === "seal" && item.status === "pending",
+  );
+
+  if (!pendingSeals.length) {
+    message.warning("请先拖拽印章到文档上");
+    return;
+  }
+
+  preSigning.value = true;
+  try {
+    const sealConfigs = pendingSeals.map((seal) => ({
+      sealId: seal.sealId,
+      x: seal.x,
+      y: seal.y,
+      scale: seal.scale || 1,
+      pageNum: seal.pageNum,
+    }));
+
+    const pagingSealConfigs = pagingSeal.sealId
+      ? [
+          {
+            sealId: pagingSeal.sealId,
+            scale: 1,
+            startPage: 1,
+            endPage: pdfImages.value.length,
+            coordinateY: Math.round(displayHeight.value / 2),
+          },
+        ]
+      : null;
+
+    const res = await getPreSignQrCode({
+      contractId: contractId.value,
+      notifyUrl: `${CALLBACK_HOST}/seal/callback/presign`,
+      isNeedUrlLink: true,
+      sealConfigs,
+      pagingSealConfigs,
+      timestampSealConfigs: null,
+    });
+
+    if (!isSuccessResponse(res) || !getResponseResult(res)) {
+      message.error(getResponseMessage(res, "获取二维码失败"));
+      return;
+    }
+
+    const data = getResponseResult(res);
+    qrCode.value = data.qrCode || "";
+    qrRequestId.value = data.requestId || "";
+    qrExpiresIn.value = data.expiresIn || 300;
+    qrVisible.value = true;
+    startQrCountdown();
+    startPolling(data.requestId);
+
+    pendingSeals.forEach((seal) => {
+      seal.status = "signing";
+    });
+  } catch {
+    message.error("获取二维码失败");
+  } finally {
+    preSigning.value = false;
+  }
+}
+
+function handlePreSignCallback(data) {
+  if (data.contractStatus !== undefined) {
+    contractStatus.value = data.contractStatus;
+    updateBusinessStatusByContractStatus(data.contractStatus);
+    if (data.contractStatus === 2000) {
+      clearContractState();
+    } else {
+      saveContractState();
+    }
+  }
+
+  sealItems.value
+    .filter((item) => item._type === "seal" && item.status === "signing")
+    .forEach((item) => {
+      item.status = "signed";
+      item._signer = data.signer || "";
+    });
+
+  if (pagingSeal.sealId) {
+    pagingSigned.value = true;
+  }
+
+  stopQrCountdown();
+  qrVisible.value = false;
+
+  if (data.contractStatus === 2000) {
+    message.success("合约签署已完成，可直接下载文件");
+  } else {
+    message.success(`预盖章确认成功，签署人：${data.signer || "未知"}`);
+  }
+
+  if (businessRecord.value?.id && data.contractStatus === 2000) {
+    writeBackLaunchSealFinished(data.contractStatus);
+  }
+}
+
+function refreshQrCode() {
+  qrRefreshing.value = true;
+  stopPolling();
+  handlePreSign().finally(() => {
+    qrRefreshing.value = false;
+  });
+}
+
+const tsFormat = ref("yyyy-MM-dd");
+const tsLoading = ref(false);
+const tsImageUrl = ref("");
+const tsData = ref(null);
+
+async function fetchTimestamp() {
+  tsLoading.value = true;
+  try {
+    const res = await getTimestamp(tsFormat.value);
+    if (!isSuccessResponse(res) || !getResponseResult(res)?.pictureUrl) {
+      message.error(getResponseMessage(res, "获取时间戳失败"));
+      return;
+    }
+
+    const data = getResponseResult(res);
+    tsImageUrl.value = data.pictureUrl;
+    tsData.value = { pictureUrl: data.pictureUrl };
+    message.success("已获取时间戳，请拖拽到文档或右键页面添加");
+  } catch {
+    message.error("获取时间戳失败");
+  } finally {
+    tsLoading.value = false;
+  }
+}
+
+async function confirmTimestamp(item) {
+  if (item.status !== "pending") return;
+  item.status = "signing";
+
+  try {
+    const res = await signTimestamp({
+      contractId: contractId.value,
+      sealConfigs: [
+        {
+          formatPattern: tsFormat.value,
+          x: item.x,
+          y: item.y,
+          pageNum: item.pageNum,
+          scale: item.scale || 1,
+        },
+      ],
+    });
+
+    if (!isSuccessResponse(res) || !getResponseResult(res)) {
+      item.status = "pending";
+      message.error(getResponseMessage(res, "时间戳签署失败"));
+      return;
+    }
+
+    const data = getResponseResult(res);
+    item.status = "signed";
+    item._signTime = data.signatureTime || "";
+    if (data.pdfToImageList?.length) {
+      pdfImages.value = normalizePdfPreviewImages(data.pdfToImageList);
+    }
+    if (data.contractStatus !== undefined) {
+      contractStatus.value = data.contractStatus;
+      updateBusinessStatusByContractStatus(data.contractStatus);
+      saveContractState();
+    }
+    message.success("时间戳签署成功");
+  } catch {
+    item.status = "pending";
+    message.error("时间戳签署失败");
+  }
+}
+
+async function handleCompleteContract() {
+  if (contractStatus.value === 2000) {
+    message.warning("合约已结束");
+    return;
+  }
+  const validateMessage = validateCompletionDates();
+  if (validateMessage) {
+    message.warning(validateMessage);
+    return;
+  }
+
+  Modal.confirm({
+    title: "确认结束",
+    content: "确认结束合约？结束后将无法再继续添加签章。",
+    okType: "danger",
+    onOk: async () => {
+      completing.value = true;
+      try {
+        const res = await completeContract(contractId.value);
+        if (!isSuccessResponse(res)) {
+          message.error(getResponseMessage(res, "结束合约失败"));
+          return;
+        }
+
+        contractStatus.value = 2000;
+        updateBusinessStatusByContractStatus(2000);
+        if (businessRecord.value?.id) {
+          await writeBackLaunchSealFinished(2000);
+        }
+        clearContractState();
+        message.success("合约已完成");
+      } catch {
+        message.error("结束合约失败");
+      } finally {
+        completing.value = false;
+      }
+    },
+  });
+}
+
+async function handleDownloadContract() {
+  if (contractStatus.value !== 2000) {
+    message.warning("请先结束合约");
+    return;
+  }
+
+  try {
+    const res = await downloadContract(contractId.value);
+    if (!isSuccessResponse(res) || !getResponseResult(res)?.downloadUrl) {
+      message.error(getResponseMessage(res, "获取下载链接失败"));
+      return;
+    }
+    window.open(getResponseResult(res).downloadUrl, "_blank");
+  } catch {
+    message.error("下载失败");
+  }
+}
+
+const ctxVisible = ref(false);
+const ctxX = ref(0);
+const ctxY = ref(0);
+const ctxPageNum = ref(1);
+const ctxOriginalX = ref(0);
+const ctxOriginalY = ref(0);
+
+function showCtxMenu(e, pageNum) {
+  const rect = e.currentTarget.getBoundingClientRect();
+  ctxOriginalX.value =
+    Math.round(((e.clientX - rect.left) / scaleRatio.value) * 100) / 100;
+  ctxOriginalY.value =
+    Math.round(((e.clientY - rect.top) / scaleRatio.value) * 100) / 100;
+  ctxVisible.value = true;
+  ctxX.value = e.clientX;
+  ctxY.value = e.clientY;
+  ctxPageNum.value = pageNum;
+}
+
+function hideCtxMenu() {
+  ctxVisible.value = false;
+}
+
+function ctxAddTimestamp() {
+  if (!tsImageUrl.value) {
+    message.warning("请先在右侧获取时间戳");
+    hideCtxMenu();
+    return;
+  }
+
+  sealItems.value.push({
+    id: ++sealPlacedId,
+    _type: "timestamp",
+    sealId: null,
+    sealName: "时间戳",
+    pictureUrl: tsData.value?.pictureUrl || "",
+    _pictureUrl: tsData.value?.pictureUrl || "",
+    owner: "",
+    pageNum: ctxPageNum.value,
+    x: ctxOriginalX.value,
+    y: ctxOriginalY.value,
+    scale: 1,
+    status: "pending",
+  });
+  hideCtxMenu();
+}
+
+onMounted(() => {
+  window.addEventListener("resize", calcDisplaySize);
+});
+
+onUnmounted(() => {
+  stopPolling();
+  stopQrCountdown();
+  window.removeEventListener("resize", calcDisplaySize);
+});
+
+watch(pdfImages, async () => {
+  await nextTick();
+  calcDisplaySize();
+});
+
+watch(visible, (value) => {
+  if (!value) {
+    stopPolling();
+    stopQrCountdown();
+    hideCtxMenu();
+  }
+});
 </script>
+
+<style scoped>
+.sign-platform {
+  width: 100%;
+  height: 100%;
+  background: #f5f7fa;
+  font-family:
+    "Inter",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+  color: #2c3e50;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.platform-layout {
+  flex: 1;
+  overflow: hidden;
+}
+
+.platform-layout-empty {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 380px;
+}
+
+.platform-layout-full {
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr) 380px;
+}
+
+.left-info-sidebar {
+  background: #fff;
+  border-right: 1px solid #ebeef5;
+  padding: 20px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.info-card {
+  background: #fff;
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
+  border: 1px solid #eef2f6;
+}
+
+.business-context-card {
+  background: linear-gradient(180deg, #ffffff, #f8fbff);
+}
+
+.info-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: #1e293b;
+  margin-bottom: 18px;
+}
+
+.info-item {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  align-items: start;
+  column-gap: 12px;
+  padding: 12px 0;
+  border-bottom: 1px dashed #eef2f6;
+  font-size: 14px;
+}
+
+.info-item:last-child {
+  border-bottom: none;
+}
+
+.info-item span {
+  color: #64748b;
+  white-space: nowrap;
+  line-height: 1.6;
+}
+
+.info-item strong {
+  color: #0f172a;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  line-height: 1.6;
+}
+
+.business-tag-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.context-note {
+  margin-top: 12px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: #f8fafc;
+  color: #64748b;
+  font-size: 12px;
+  line-height: 1.7;
+}
+
+.business-meta-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: #0f172a;
+  margin-bottom: 10px;
+}
+
+.business-meta-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.business-meta-item {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  align-items: start;
+  column-gap: 12px;
+  font-size: 12px;
+  color: #64748b;
+  padding-bottom: 8px;
+  border-bottom: 1px dashed #eef2f6;
+}
+
+.business-meta-item:last-child {
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.business-meta-item span {
+  white-space: nowrap;
+  line-height: 1.6;
+}
+
+.business-meta-item strong {
+  min-width: 0;
+  text-align: left;
+  color: #0f172a;
+  font-weight: 600;
+  white-space: normal;
+  overflow: visible;
+  text-overflow: initial;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  line-height: 1.6;
+}
+
+.upload-mode-hint {
+  font-size: 12px;
+  color: #64748b;
+  line-height: 1.8;
+}
+
+.preview-area {
+  background: linear-gradient(to bottom, #f8fafc, #eef2f7);
+  overflow-y: auto;
+  padding: 30px 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 0;
+  gap: 28px;
+}
+
+.empty-preview {
+  justify-content: center;
+  align-items: center;
+  background: #f0f2f5;
+  min-width: 0;
+}
+
+.preview-placeholder {
+  width: 420px;
+  padding: 60px 40px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.preview-placeholder p {
+  margin-top: 14px;
+  font-size: 15px;
+  color: #64748b;
+}
+
+.pdf-page-wrapper {
+  position: relative;
+  border-radius: 12px;
+  overflow: visible;
+  background: white;
+  box-shadow:
+    0 12px 40px rgba(15, 23, 42, 0.08),
+    0 2px 8px rgba(15, 23, 42, 0.04);
+  transition: all 0.2s ease;
+}
+
+.pdf-page-wrapper:hover {
+  transform: translateY(-2px);
+}
+
+.pdf-page-image {
+  display: block;
+  user-select: none;
+  pointer-events: none;
+}
+
+.placed-seal {
+  position: absolute;
+  z-index: 10;
+  cursor: move;
+  user-select: none;
+}
+
+.placed-seal.seal-signed {
+  cursor: default;
+}
+
+.placed-seal .placed-seal-img {
+  width: 170px;
+  height: auto;
+  opacity: 0.85;
+  display: block;
+  pointer-events: none;
+}
+
+.placed-seal .placed-seal-fallback {
+  width: 80px;
+  height: 40px;
+  border: 2px dashed #409eff;
+  background: rgba(64, 158, 255, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: #409eff;
+}
+
+.placed-delete {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  background: #f56c6c;
+  color: #fff;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 2px;
+}
+
+.placed-delete:hover {
+  background: #e03838;
+}
+
+.placed-seal.seal-signed .placed-seal-img {
+  opacity: 1;
+}
+
+.placed-seal.seal-signed .placed-delete {
+  display: none;
+}
+
+.placed-seal.placed-ts .placed-seal-img {
+  width: 130px;
+}
+
+.placed-seal.placed-ts .ts-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 4px;
+  background: #fff;
+  padding: 2px 6px;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+}
+
+.paging-seal-wrapper {
+  position: absolute;
+  top: 50%;
+  right: -18px;
+  transform: translateY(-50%);
+  width: 52px;
+  height: fit-content;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+  cursor: pointer;
+  transition: all 0.25s ease;
+}
+
+.paging-seal-wrapper:hover {
+  transform: translateY(-50%) scale(1.03);
+}
+
+.paging-empty-box {
+  width: 100%;
+  border: 2px dashed #cbd5e1;
+  border-radius: 12px;
+  background: rgba(248, 250, 252, 0.95);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #94a3b8;
+  transition: all 0.2s ease;
+  padding: 10px;
+}
+
+.paging-empty-text {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  font-size: 16px;
+  letter-spacing: 4px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.paging-empty-box:hover {
+  border-color: #3b82f6;
+  color: #3b82f6;
+  background: #eff6ff;
+}
+
+.paging-seal-real {
+  width: 100%;
+  border: 2px solid rgba(210, 50, 50, 0.65);
+  background: radial-gradient(
+    circle at center,
+    rgba(255, 255, 255, 0.04),
+    rgba(255, 0, 0, 0.03)
+  );
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.9;
+  padding: 8px 4px;
+  box-shadow:
+    0 0 12px rgba(210, 50, 50, 0.2),
+    inset 0 0 8px rgba(210, 50, 50, 0.1);
+}
+
+.paging-seal-img {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+  margin-bottom: 4px;
+}
+
+.paging-seal-real-text {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  font-size: 14px;
+  letter-spacing: 2px;
+  color: rgba(210, 50, 50, 0.72);
+  font-family: "STFangsong", "FangSong", "SimSun", serif;
+  user-select: none;
+}
+
+.operation-sidebar {
+  width: 380px;
+  background: #fff;
+  border-left: 1px solid #e2e6ed;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  gap: 16px;
+  overflow-y: auto;
+  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.04);
+}
+
+.step-card {
+  background: #fff;
+  border: 1px solid #eef1f5;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+  flex-shrink: 0;
+}
+
+.step-card-disabled {
+  opacity: 0.6;
+}
+
+.step-card-header {
+  padding: 14px 16px;
+  background: #f8f9fb;
+  border-bottom: 1px solid #f0f2f5;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.step-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  background: #3b6fa0;
+  color: #fff;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.step-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #2c3e50;
+}
+
+.step-required {
+  font-size: 12px;
+  color: #c88a2e;
+  margin-left: 4px;
+}
+
+.step-card-body {
+  padding: 16px;
+}
+
+.step-hint {
+  color: #8b95a5;
+  font-size: 13px;
+  margin: 0;
+}
+
+.seal-query-section,
+.seal-drag-section,
+.paging-section {
+  margin-bottom: 14px;
+}
+
+.section-subtitle {
+  font-size: 13px;
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 10px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid #f0f2f5;
+}
+
+.form-item {
+  margin-bottom: 10px;
+}
+
+.form-item label {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 13px;
+  color: #606266;
+}
+
+.form-item .required {
+  color: #f56c6c;
+}
+
+.seal-type-checkboxes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 10px;
+}
+
+.seal-drag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.seal-drag-item {
+  width: 70px;
+  cursor: grab;
+  text-align: center;
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
+  padding: 6px;
+  transition: all 0.2s;
+}
+
+.seal-drag-item:hover {
+  border-color: #409eff;
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
+}
+
+.seal-drag-item:active {
+  cursor: grabbing;
+}
+
+.drag-seal-img {
+  width: 60px;
+  height: auto;
+  display: block;
+  margin: 0 auto 4px;
+}
+
+.drag-seal-name {
+  font-size: 10px;
+  color: #606266;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+
+.paging-drop-zone {
+  border: 2px dashed #e6a23c;
+  border-radius: 6px;
+  padding: 16px;
+  text-align: center;
+  color: #e6a23c;
+  font-size: 13px;
+  min-height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: rgba(230, 162, 60, 0.04);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.paging-drop-zone:hover {
+  border-color: #e6a23c;
+  background: rgba(230, 162, 60, 0.1);
+}
+
+.paging-seal-thumb {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+
+.del-icon {
+  cursor: pointer;
+  color: #f56c6c;
+  font-size: 14px;
+}
+
+.del-icon:hover {
+  color: #e03838;
+}
+
+.ts-drag-area {
+  margin-top: 10px;
+  padding: 10px;
+  background: #f5f7fa;
+  border-radius: 6px;
+  border: 1px dashed #dcdfe6;
+}
+
+.ts-drag-item {
+  width: 130px;
+  cursor: grab;
+  text-align: center;
+  padding: 6px;
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
+  background: #fff;
+}
+
+.ts-drag-item:hover {
+  border-color: #67c23a;
+}
+
+.ts-drag-item:active {
+  cursor: grabbing;
+}
+
+.ts-drag-item .drag-seal-img {
+  width: 120px;
+  height: auto;
+  display: block;
+  margin: 0 auto 4px;
+}
+
+.ts-drag-item span {
+  font-size: 11px;
+  color: #909399;
+}
+
+.ts-hint {
+  font-size: 11px;
+  color: #909399;
+  margin: 6px 0 0;
+  text-align: center;
+}
+
+.upload-dragger {
+  border: 2px dashed #dcdfe6;
+  border-radius: 10px;
+  padding: 24px 16px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.25s;
+  background: #fafbfc;
+}
+
+.upload-dragger:hover,
+.is-dragover {
+  border-color: #3b6fa0;
+  background: #eaf2f9;
+}
+
+.upload-content .anticon {
+  font-size: 36px;
+  color: #b0b8c5;
+  margin-bottom: 8px;
+}
+
+.upload-text,
+.file-name {
+  font-size: 14px;
+  color: #2c3e50;
+  margin: 0 0 6px;
+}
+
+.file-name {
+  font-weight: 500;
+}
+
+.upload-hint,
+.file-size {
+  font-size: 12px;
+  color: #8b95a5;
+  margin: 0 0 8px;
+}
+
+.contract-name-row {
+  margin-top: 14px;
+}
+
+.sign-hint {
+  font-size: 12px;
+  color: #909399;
+  text-align: center;
+  margin: 6px 0 0;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 20px;
+  height: 38px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  user-select: none;
+  border: none;
+  background: #f0f2f5;
+  color: #2c3e50;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #3b82f6, #2563eb);
+  color: white;
+  border: none;
+  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
+  margin-top: 10px;
+}
+
+.btn-primary:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
+}
+
+.btn-success {
+  background: linear-gradient(135deg, #10b981, #059669);
+  color: white;
+  border: none;
+  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.18);
+}
+
+.btn-success:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 24px rgba(16, 185, 129, 0.28);
+}
+
+.btn-danger-text {
+  background: transparent;
+  color: #c0392b;
+  padding: 0;
+  height: auto;
+  font-size: 13px;
+}
+
+.btn-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.btn-sm {
+  height: 30px;
+  padding: 0 12px;
+  font-size: 12px;
+}
+
+.btn-loading {
+  pointer-events: none;
+  opacity: 0.8;
+}
+
+.contract-status-tag {
+  margin-top: 12px;
+  font-size: 13px;
+}
+
+.complete-form-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.tag-success {
+  color: #4a9c5d;
+  font-weight: 500;
+}
+
+.tag-warning {
+  color: #c88a2e;
+  font-weight: 500;
+}
+
+.tag-info {
+  color: #8b95a5;
+  font-weight: 500;
+}
+
+.ctx-menu-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9998;
+  background: transparent;
+}
+
+.ctx-menu-panel {
+  position: fixed;
+  z-index: 9999;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+  padding: 6px 0;
+  min-width: 200px;
+}
+
+.ctx-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 20px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #2c3e50;
+  transition: background 0.15s;
+}
+
+.ctx-menu-item:hover {
+  background: #f0f5ff;
+  color: #3b6fa0;
+}
+
+.qr-dialog-body {
+  text-align: center;
+}
+
+.qr-img-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+}
+
+.qr-loading {
+  flex-direction: column;
+  gap: 12px;
+  color: #8b95a5;
+}
+
+.qr-img {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #eee;
+  border-radius: 10px;
+  padding: 8px;
+}
+
+.qr-countdown {
+  margin-top: 14px;
+}
+
+.countdown-text {
+  margin-top: 6px;
+  font-size: 13px;
+  color: #5a6b7c;
+}
+
+@media (max-width: 900px) {
+  .operation-sidebar {
+    width: 320px;
+  }
+}
+</style>