From eab359d9fa5ff371d189cbb1df6cb1552bdf9bdb Mon Sep 17 00:00:00 2001
From: fuenmao <980740792@qq.com>
Date: Tue, 25 Aug 2026 20:37:24 +0800
Subject: [PATCH] 11

---
 src/api/modules/biz/onboarding.ts             |   47 +
 src/views/biz/onboarding/contract/index.vue   |  267 ++-
 .../components/OnboardingTemplatePanel.vue    |  643 ++++---
 .../components/VariableDefinitionPanel.vue    |  359 ++++
 .../biz/onboarding/entry-config/index.vue     |  259 +--
 src/views/onboarding/fill/index.vue           | 1676 ++++++++---------
 6 files changed, 1748 insertions(+), 1503 deletions(-)
 create mode 100644 src/views/biz/onboarding/entry-config/components/VariableDefinitionPanel.vue

diff --git a/src/api/modules/biz/onboarding.ts b/src/api/modules/biz/onboarding.ts
index 571dad8..0a8842e 100644
--- a/src/api/modules/biz/onboarding.ts
+++ b/src/api/modules/biz/onboarding.ts
@@ -495,5 +495,52 @@ export const onboardingTaskApi = {
       "material-type/delete",
       { ids }
     );
+  },
+
+  // 合同变量字典定义
+  variableDefinitionPage(params: { keyword?: string; variableCategory?: string; pageNum: number; pageSize: number }) {
+    return moduleRequest("/biz/onboarding/variable-definition/").get<ResPage<any>>("page", params);
+  },
+
+  variableDefinitionList() {
+    return moduleRequest("/biz/onboarding/variable-definition/").get<any[]>("list");
+  },
+
+  addVariableDefinition(params: Record<string, unknown>) {
+    return moduleRequest("/biz/onboarding/variable-definition/").post("add", params);
+  },
+
+  editVariableDefinition(params: Record<string, unknown>) {
+    return moduleRequest("/biz/onboarding/variable-definition/").post("edit", params);
+  },
+
+  deleteVariableDefinitions(ids: number[]) {
+    return moduleRequest("/biz/onboarding/variable-definition/").post("delete", { ids });
+  }
+};
+
+const publicHttp = moduleRequest("/open/onboarding/");
+
+export const onboardingPublicApi = {
+  detail(params: { token: string }) {
+    return publicHttp.post<any>("detail", params);
+  },
+  saveEmployeeInfo(params: Record<string, unknown>) {
+    return publicHttp.post("save-employee-info", params);
+  },
+  saveMaterial(params: { token: string; materialTypeId: number; fileId: number }) {
+    return publicHttp.post("save-material", params);
+  },
+  confirmContract(params: { token: string; taskContractId: number }) {
+    return publicHttp.post("confirm-contract", params);
+  },
+  submit(params: { token: string }) {
+    return publicHttp.post("submit", params);
+  },
+  contractSourceUrl(params: { token: string; taskContractId: number }) {
+    return `/api/open/onboarding/contract-source?token=${encodeURIComponent(params.token)}&taskContractId=${params.taskContractId}`;
+  },
+  deleteMaterial(params: { token: string; taskMaterialId: number }) {
+    return publicHttp.post("delete-material", params);
   }
 };
\ No newline at end of file
diff --git a/src/views/biz/onboarding/contract/index.vue b/src/views/biz/onboarding/contract/index.vue
index f99d21a..c881481 100644
--- a/src/views/biz/onboarding/contract/index.vue
+++ b/src/views/biz/onboarding/contract/index.vue
@@ -82,7 +82,7 @@
     <el-drawer
       v-model="drawerVisible"
       :title="`合同模板管理 · ${selectedTemplate?.templateName || ''}`"
-      size="960px"
+      size="1150px"
       destroy-on-close
     >
       <div v-if="selectedTemplate" class="drawer-content-box">
@@ -135,54 +135,56 @@
                 <el-table-column prop="expiryDate" label="失效日期" width="130" align="center" />
                 <el-table-column prop="remark" label="版本说明" min-width="150" />
 
-                <el-table-column label="操作" width="280" fixed="right">
+                <el-table-column label="操作" width="340" fixed="right" align="center">
                   <template #default="scope">
-                    <el-button
-                      link
-                      type="primary"
-                      icon="Setting"
-                      @click="openVariables(scope.row)"
-                    >
-                      变量
-                    </el-button>
+                    <div class="table-actions">
+                      <el-button
+                        link
+                        type="primary"
+                        icon="Setting"
+                        @click="openVariables(scope.row)"
+                      >
+                        变量
+                      </el-button>
 
-                    <el-button
-                      link
-                      type="primary"
-                      icon="Download"
-                      @click="downloadDocx(scope.row.sourceDocxFileId)"
-                    >
-                      下载源文件
-                    </el-button>
+                      <el-button
+                        link
+                        type="primary"
+                        icon="Download"
+                        @click="downloadDocx(scope.row.sourceDocxFileId)"
+                      >
+                        下载源文件
+                      </el-button>
 
-                    <el-button
-                      v-if="scope.row.versionStatus !== 'enabled'"
-                      link
-                      type="success"
-                      icon="Check"
-                      @click="changeVersionStatus(scope.row, 'enabled')"
-                    >
-                      启用
-                    </el-button>
+                      <el-button
+                        v-if="scope.row.versionStatus !== 'enabled'"
+                        link
+                        type="success"
+                        icon="Check"
+                        @click="changeVersionStatus(scope.row, 'enabled')"
+                      >
+                        启用
+                      </el-button>
 
-                    <el-button
-                      v-else
-                      link
-                      type="warning"
-                      icon="Close"
-                      @click="changeVersionStatus(scope.row, 'disabled')"
-                    >
-                      停用
-                    </el-button>
+                      <el-button
+                        v-else
+                        link
+                        type="warning"
+                        icon="Close"
+                        @click="changeVersionStatus(scope.row, 'disabled')"
+                      >
+                        停用
+                      </el-button>
 
-                    <el-button
-                      link
-                      type="danger"
-                      icon="Delete"
-                      @click="removeVersion(scope.row)"
-                    >
-                      删除
-                    </el-button>
+                      <el-button
+                        link
+                        type="danger"
+                        icon="Delete"
+                        @click="removeVersion(scope.row)"
+                      >
+                        删除
+                      </el-button>
+                    </div>
                   </template>
                 </el-table-column>
               </el-table>
@@ -257,69 +259,87 @@
     <el-dialog
       v-model="variablesVisible"
       :title="`合同变量配置 · 版本 ${selectedVersion?.versionNo || ''}`"
-      width="1050px"
+      width="1220px"
+      top="4vh"
       destroy-on-close
       append-to-body
+      class="variables-dialog"
     >
       <el-alert
-        title="变量已从 DOCX 自动识别。请逐项检查来源、显示名称、数据类型和取值字段；未识别变量调整完成后才能启用版本。"
+        title="变量已从 DOCX 自动识别与解析。请核对来源分类、显示名称及数据类型；确保全部配置正确后即可启用版本。"
         type="info"
         show-icon
         :closable="false"
+        class="mb-3"
       />
 
-      <el-table :data="variables" border stripe class="mt-3">
-        <el-table-column prop="variableCode" label="变量编码 (DOCX占位符)" min-width="220">
-          <template #default="scope">
-            <div style="display: flex; align-items: center; justify-content: space-between;">
-              <code style="font-weight: 600; color: #2563eb;">{{ formatPlaceholder(scope.row.variableCode) }}</code>
-              <el-button
-                size="small"
-                link
-                type="primary"
-                icon="CopyDocument"
-                @click="copyPlaceholder(scope.row.variableCode)"
-              >
-                复制
+      <!-- 分组 Tabs 切换 -->
+      <el-tabs v-model="variableTab" type="card" class="variable-filter-tabs">
+        <el-tab-pane :label="`全部变量 (${variableCounts.all})`" name="all" />
+        <el-tab-pane :label="`员工填写 (${variableCounts.employee})`" name="employee" />
+        <el-tab-pane :label="`人事合同参数 (${variableCounts.hr})`" name="hr" />
+        <el-tab-pane :label="`公司信息 (${variableCounts.company})`" name="company" />
+        <el-tab-pane :label="`系统预置 (${variableCounts.system})`" name="system" />
+      </el-tabs>
+
+      <div class="variables-table-wrapper">
+        <el-table :data="filteredVariables" border stripe height="500px">
+          <el-table-column prop="variableCode" label="变量全编码 (DOCX占位符)" min-width="260">
+            <template #default="scope">
+              <div class="variable-code-cell">
+                <code class="code-font">{{ formatPlaceholder(scope.row.variableCode) }}</code>
+                <el-button
+                  size="small"
+                  link
+                  type="primary"
+                  icon="CopyDocument"
+                  @click="copyPlaceholder(scope.row.variableCode)"
+                >
+                  复制
+                </el-button>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="variableName" label="变量显示名称" min-width="170" />
+
+          <el-table-column prop="variableType" label="来源板块" width="130" align="center">
+            <template #default="scope">
+              <el-tag size="small" :type="variableTypeTag(scope.row.variableType)">
+                {{ variableTypeText(scope.row.variableType) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="dataType" label="数据类型" width="100" align="center">
+            <template #default="scope">
+              <el-tag size="small" type="info">{{ scope.row.dataType || 'string' }}</el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="employeeField" label="对应字段" min-width="160" show-overflow-tooltip />
+
+          <el-table-column label="必填" width="80" align="center">
+            <template #default="scope">
+              <el-tag size="small" :type="scope.row.required ? 'danger' : 'info'">
+                {{ scope.row.required ? "是" : "否" }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" width="120" align="center" fixed="right">
+            <template #default="scope">
+              <el-button link type="primary" icon="Edit" @click="openVariableEdit(scope.row)">
+                检查调整
               </el-button>
-            </div>
-          </template>
-        </el-table-column>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
 
-        <el-table-column prop="variableName" label="变量显示名称" min-width="160" />
-
-        <el-table-column prop="variableType" label="来源类型" width="130" align="center">
-          <template #default="scope">
-            <el-tag size="small" :type="variableTypeTag(scope.row.variableType)">
-              {{ variableTypeText(scope.row.variableType) }}
-            </el-tag>
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="dataType" label="数据类型" width="100" align="center">
-          <template #default="scope">
-            <el-tag size="small" type="info">{{ scope.row.dataType }}</el-tag>
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="employeeField" label="对应员工字段" min-width="140" />
-
-        <el-table-column label="必填" width="80" align="center">
-          <template #default="scope">
-            <el-tag size="small" :type="scope.row.required ? 'danger' : 'info'">
-              {{ scope.row.required ? "是" : "否" }}
-            </el-tag>
-          </template>
-        </el-table-column>
-
-        <el-table-column label="操作" width="150" fixed="right">
-          <template #default="scope">
-            <el-button link type="primary" icon="Edit" @click="openVariableEdit(scope.row)">
-              检查调整
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+      <template #footer>
+        <el-button type="primary" @click="variablesVisible = false">关闭</el-button>
+      </template>
     </el-dialog>
 
     <!-- 新增 / 编辑单个变量 -->
@@ -391,7 +411,7 @@
 </template>
 
 <script setup lang="ts" name="onboardingContract">
-import { reactive, ref } from "vue";
+import { computed, reactive, ref } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { Check } from "@element-plus/icons-vue";
 import {
@@ -414,6 +434,25 @@ const versionVisible = ref(false);
 const variablesVisible = ref(false);
 const variables = ref<OnboardingTemplateVariable[]>([]);
 const variableVisible = ref(false);
+const variableTab = ref("all");
+
+const filteredVariables = computed(() => {
+  if (variableTab.value === "all") return variables.value;
+  if (variableTab.value === "employee") return variables.value.filter(v => v.variableType === "employee");
+  if (variableTab.value === "hr") return variables.value.filter(v => v.variableType === "hr" || v.variableType === "contract" || v.variableCode.startsWith("hr."));
+  if (variableTab.value === "company") return variables.value.filter(v => v.variableType === "company");
+  if (variableTab.value === "system") return variables.value.filter(v => v.variableType === "system");
+  return variables.value;
+});
+
+const variableCounts = computed(() => {
+  const all = variables.value.length;
+  const employee = variables.value.filter(v => v.variableType === "employee").length;
+  const hr = variables.value.filter(v => v.variableType === "hr" || v.variableType === "contract" || v.variableCode.startsWith("hr.")).length;
+  const company = variables.value.filter(v => v.variableType === "company").length;
+  const system = variables.value.filter(v => v.variableType === "system").length;
+  return { all, employee, hr, company, system };
+});
 
 const emptyTemplate = (): Partial<OnboardingContractTemplate> => ({
   templateCode: "",
@@ -734,4 +773,38 @@ async function saveVariable() {
   display: flex;
   align-items: center;
 }
+
+.table-actions {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  white-space: nowrap;
+}
+
+.variable-filter-tabs {
+  margin-bottom: 12px;
+}
+
+.variables-table-wrapper {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.variable-code-cell {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  white-space: nowrap;
+}
+
+.code-font {
+  font-family: Consolas, Monaco, monospace;
+  font-weight: 600;
+  color: #2563eb;
+  background: #eff6ff;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/biz/onboarding/entry-config/components/OnboardingTemplatePanel.vue b/src/views/biz/onboarding/entry-config/components/OnboardingTemplatePanel.vue
index 0bd79ea..c619407 100644
--- a/src/views/biz/onboarding/entry-config/components/OnboardingTemplatePanel.vue
+++ b/src/views/biz/onboarding/entry-config/components/OnboardingTemplatePanel.vue
@@ -1,13 +1,8 @@
 <template>
   <div class="template-panel">
     <div class="toolbar">
-      <el-input
-        v-model="query.keyword"
-        clearable
-        placeholder="搜索模板编码或名称"
-        class="keyword-input"
-        @keyup.enter="loadTemplates"
-      />
+      <el-input v-model="query.keyword" clearable placeholder="搜索模板编码或名称" class="keyword-input"
+        @keyup.enter="loadTemplates" />
       <el-select v-model="query.companyId" clearable filterable placeholder="全部公司" class="company-filter">
         <el-option v-for="item in companies" :key="item.id" :label="item.companyName" :value="item.id" />
       </el-select>
@@ -17,193 +12,202 @@
       <el-button type="primary" icon="Plus" @click="openCreate">新增入职模板</el-button>
     </div>
 
-    <el-alert
-      title="入职模板统一管理公司、岗位、合同、员工补充字段和上传材料；创建任务后会冻结本次配置。"
-      type="info"
-      :closable="false"
-      show-icon
-      class="tip"
-    />
+    <el-alert title="入职模板统一管理公司、岗位、合同文件与员工上传材料；员工入职档案自动采用标准《入职登记表》。" type="info" :closable="false" show-icon
+      class="tip" />
 
-    <el-table v-loading="loading" :data="rows" border>
-      <el-table-column prop="templateCode" label="模板编码" min-width="150" />
-      <el-table-column prop="templateName" label="模板名称" min-width="180" />
-      <el-table-column prop="companyName" label="所属公司" min-width="160" />
-      <el-table-column label="适用岗位" min-width="220">
-        <template #default="scope">
-          <el-space wrap>
-            <el-tag v-for="name in scope.row.positionNames" :key="name" size="small">{{ name }}</el-tag>
-          </el-space>
-        </template>
-      </el-table-column>
-      <el-table-column label="配置内容" min-width="230">
-        <template #default="scope">
-          合同 {{ scope.row.contractCount || 0 }} 份 / 补充字段 {{ scope.row.formFieldCount || 0 }} 项 / 材料 {{ scope.row.materialCount || 0 }} 项
-        </template>
-      </el-table-column>
-      <el-table-column prop="status" label="状态" width="90" align="center">
-        <template #default="scope">
-          <el-tag :type="scope.row.status === 'enable' ? 'success' : 'info'">
-            {{ scope.row.status === "enable" ? "启用" : "停用" }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="150" fixed="right">
-        <template #default="scope">
-          <el-button link type="primary" @click="openEdit(scope.row)">编辑</el-button>
-          <el-button link type="danger" @click="removeTemplate(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <div class="pagination">
-      <el-pagination
-        v-model:current-page="query.pageNum"
-        v-model:page-size="query.pageSize"
-        layout="total, sizes, prev, pager, next"
-        :total="total"
-        @current-change="loadTemplates"
-        @size-change="loadTemplates"
-      />
+    <div class="table-container">
+      <el-table v-loading="loading" :data="rows" border stripe height="100%">
+        <el-table-column prop="templateCode" label="模板编码" min-width="150" />
+        <el-table-column prop="templateName" label="模板名称" min-width="180" />
+        <el-table-column prop="companyName" label="所属公司" min-width="160" />
+        <el-table-column label="适用岗位" min-width="220">
+          <template #default="scope">
+            <el-space wrap>
+              <el-tag v-for="name in scope.row.positionNames" :key="name" size="small">{{ name }}</el-tag>
+            </el-space>
+          </template>
+        </el-table-column>
+        <el-table-column label="配置内容" min-width="200">
+          <template #default="scope">
+            合同 {{ scope.row.contractCount || 0 }} 份 / 材料 {{ scope.row.materialCount || 0 }} 项
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="90" align="center">
+          <template #default="scope">
+            <el-tag :type="scope.row.status === 'enable' ? 'success' : 'info'">
+              {{ scope.row.status === "enable" ? "启用" : "停用" }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="150" fixed="right">
+          <template #default="scope">
+            <el-button link type="primary" @click="openEdit(scope.row)">编辑</el-button>
+            <el-button link type="danger" @click="removeTemplate(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
     </div>
 
-    <el-dialog
-      v-model="visible"
-      :title="form.id ? '编辑入职模板' : '新增入职模板'"
-      width="1080px"
-      top="5vh"
-      destroy-on-close
-    >
-      <el-form label-width="110px">
-        <el-divider content-position="left">基本信息</el-divider>
-        <el-row :gutter="16">
-          <el-col :span="8">
-            <el-form-item label="模板编码" required>
-              <el-input v-model="form.templateCode" placeholder="例如 FULLTIME_DEFAULT" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="模板名称" required>
-              <el-input v-model="form.templateName" placeholder="例如 全职员工入职模板" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="状态" required>
-              <el-radio-group v-model="form.status">
-                <el-radio value="enable">启用</el-radio>
-                <el-radio value="disable">停用</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="16">
-          <el-col :span="10">
-            <el-form-item label="所属公司" required>
-              <el-select v-model="form.companyId" filterable class="full-width" @change="onCompanyChange">
-                <el-option v-for="item in companies" :key="item.id" :label="item.companyName" :value="item.id" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="14">
-            <el-form-item label="适用岗位" required>
-              <el-select v-model="form.positionIds" multiple filterable collapse-tags class="full-width" :disabled="!form.companyId">
-                <el-option v-for="item in positions" :key="item.id" :label="item.positionName" :value="item.id" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-form-item label="模板说明">
-          <el-input v-model="form.description" type="textarea" :rows="2" />
-        </el-form-item>
+    <div class="pagination">
+      <el-pagination v-model:current-page="query.pageNum" v-model:page-size="query.pageSize"
+        layout="total, sizes, prev, pager, next" :total="total" @current-change="loadTemplates"
+        @size-change="loadTemplates" />
+    </div>
 
-        <el-divider content-position="left">合同文件</el-divider>
-        <div class="section-action">
-          <span>合同变量由上传 DOCX 时自动识别，这里只选择已确认并启用的版本。</span>
-          <el-button type="primary" plain icon="Plus" @click="addContract">添加合同</el-button>
-        </div>
-        <el-table :data="form.contracts" border empty-text="请至少添加一份合同">
-          <el-table-column label="合同模板" min-width="210">
-            <template #default="scope">
-              <el-select v-model="scope.row.contractTemplateId" filterable class="full-width" @change="onContractTemplateChange(scope.row)">
-                <el-option v-for="item in contractTemplates" :key="item.id" :label="item.templateName" :value="item.id" />
-              </el-select>
-            </template>
-          </el-table-column>
-          <el-table-column label="启用版本" min-width="180">
-            <template #default="scope">
-              <el-select v-model="scope.row.contractTemplateVersionId" class="full-width" :disabled="!scope.row.contractTemplateId">
-                <el-option
-                  v-for="item in versionOptions[scope.row.contractTemplateId] || []"
-                  :key="item.id"
-                  :label="item.versionNo"
-                  :value="item.id"
-                />
-              </el-select>
-            </template>
-          </el-table-column>
-          <el-table-column label="必须确认" width="100" align="center">
-            <template #default="scope"><el-switch v-model="scope.row.required" /></template>
-          </el-table-column>
-          <el-table-column label="打印份数" width="130">
-            <template #default="scope"><el-input-number v-model="scope.row.printCopies" :min="1" :max="10" /></template>
-          </el-table-column>
-          <el-table-column label="排序" width="110">
-            <template #default="scope"><el-input-number v-model="scope.row.sortCode" :min="0" /></template>
-          </el-table-column>
-          <el-table-column label="操作" width="80" align="center">
-            <template #default="scope"><el-button link type="danger" @click="form.contracts.splice(scope.$index, 1)">移除</el-button></template>
-          </el-table-column>
-        </el-table>
+    <!-- 模板编辑大弹窗 -->
+    <el-dialog v-model="visible" :title="form.id ? '编辑入职模板' : '新增入职模板'" width="62%" top="3vh" destroy-on-close
+      append-to-body class="template-dialog">
+      <div class="template-dialog-body">
+        <el-form label-width="100px" label-position="top">
+          <!-- 1. 基本信息卡片 -->
+          <div class="form-block-card">
+            <div class="block-card-header">
+              <span class="block-title">基本信息</span>
+              <span class="block-subtitle">配置模板编码、名称、归属公司及适用岗位范围</span>
+            </div>
 
-        <el-divider content-position="left">员工补充字段</el-divider>
-        <el-alert title="姓名、手机号、身份证号等基本信息固定展示；这里只选择额外需要员工填写的字段。" type="info" :closable="false" class="section-tip" />
-        <el-table :data="formFields" border max-height="260">
-          <el-table-column label="选择" width="70" align="center">
-            <template #default="scope">
-              <el-checkbox :model-value="hasField(scope.row.id)" @change="value => toggleField(scope.row.id, Boolean(value))" />
-            </template>
-          </el-table-column>
-          <el-table-column prop="fieldCode" label="字段编码" min-width="170" />
-          <el-table-column prop="fieldName" label="字段名称" min-width="180" />
-          <el-table-column prop="dataType" label="数据类型" width="110" />
-          <el-table-column label="必填" width="100" align="center">
-            <template #default="scope">
-              <el-switch v-if="hasField(scope.row.id)" v-model="fieldConfig(scope.row.id)!.required" />
-            </template>
-          </el-table-column>
-          <el-table-column label="排序" width="120">
-            <template #default="scope">
-              <el-input-number v-if="hasField(scope.row.id)" v-model="fieldConfig(scope.row.id)!.sortCode" :min="0" />
-            </template>
-          </el-table-column>
-        </el-table>
+            <el-row :gutter="20">
+              <el-col :xs="24" :sm="8">
+                <el-form-item label="模板编码" required>
+                  <el-input v-model="form.templateCode" placeholder="如：FULLTIME_DEV" />
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="8">
+                <el-form-item label="模板名称" required>
+                  <el-input v-model="form.templateName" placeholder="如：全职技术人员入职模板" />
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="8">
+                <el-form-item label="状态" required>
+                  <el-radio-group v-model="form.status">
+                    <el-radio value="enable">启用</el-radio>
+                    <el-radio value="disable">停用</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+              </el-col>
 
-        <el-divider content-position="left">员工上传材料</el-divider>
-        <el-table :data="materialTypes" border max-height="260">
-          <el-table-column label="选择" width="70" align="center">
-            <template #default="scope">
-              <el-checkbox :model-value="hasMaterial(scope.row.id)" @change="value => toggleMaterial(scope.row.id, Boolean(value))" />
-            </template>
-          </el-table-column>
-          <el-table-column prop="materialCode" label="材料编码" min-width="170" />
-          <el-table-column prop="materialName" label="材料名称" min-width="200" />
-          <el-table-column prop="maxFileCount" label="最多文件" width="100" align="center" />
-          <el-table-column label="必传" width="100" align="center">
-            <template #default="scope">
-              <el-switch v-if="hasMaterial(scope.row.id)" v-model="materialConfig(scope.row.id)!.required" />
-            </template>
-          </el-table-column>
-          <el-table-column label="排序" width="120">
-            <template #default="scope">
-              <el-input-number v-if="hasMaterial(scope.row.id)" v-model="materialConfig(scope.row.id)!.sortCode" :min="0" />
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-form>
+              <el-col :xs="24" :sm="10">
+                <el-form-item label="所属公司" required>
+                  <el-select v-model="form.companyId" filterable class="full-width" placeholder="请选择公司"
+                    @change="onCompanyChange">
+                    <el-option v-for="item in companies" :key="item.id" :label="item.companyName" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="14">
+                <el-form-item label="适用岗位" required>
+                  <el-select v-model="form.positionIds" multiple filterable collapse-tags collapse-tags-tooltip
+                    class="full-width" :disabled="!form.companyId" placeholder="请选择适用的岗位（可多选）">
+                    <el-option v-for="item in positions" :key="item.id" :label="item.positionName" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+
+              <el-col :span="24">
+                <el-form-item label="模板说明">
+                  <el-input v-model="form.description" type="textarea" :rows="2" placeholder="填写该入职模板的适用范围或注意事项" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+
+          <!-- 2. 关联合同文件卡片 -->
+          <div class="form-block-card">
+            <div class="block-card-header flex-between">
+              <div>
+                <span class="block-title">关联合同文件</span>
+                <span class="block-subtitle">选择该岗位入职时需要员工确认与签署的合同模板及版本</span>
+              </div>
+              <el-button type="primary" plain icon="Plus" size="small" @click="addContract">
+                添加合同文件
+              </el-button>
+            </div>
+
+            <el-table :data="form.contracts" border empty-text="暂无关联合同，请点击右上角添加" class="mt-2">
+              <el-table-column label="合同模板" min-width="220">
+                <template #default="scope">
+                  <el-select v-model="scope.row.contractTemplateId" filterable class="full-width" placeholder="选择合同模板"
+                    @change="onContractTemplateChange(scope.row)">
+                    <el-option v-for="item in contractTemplates" :key="item.id" :label="item.templateName"
+                      :value="item.id" />
+                  </el-select>
+                </template>
+              </el-table-column>
+              <el-table-column label="启用版本" min-width="160">
+                <template #default="scope">
+                  <el-select v-model="scope.row.contractTemplateVersionId" class="full-width" placeholder="选择版本"
+                    :disabled="!scope.row.contractTemplateId">
+                    <el-option v-for="item in versionOptions[scope.row.contractTemplateId] || []" :key="item.id"
+                      :label="item.versionNo" :value="item.id" />
+                  </el-select>
+                </template>
+              </el-table-column>
+              <el-table-column label="必须确认" width="100" align="center">
+                <template #default="scope">
+                  <el-switch v-model="scope.row.required" />
+                </template>
+              </el-table-column>
+              <el-table-column label="打印份数" width="130" align="center">
+                <template #default="scope">
+                  <el-input-number v-model="scope.row.printCopies" :min="1" :max="10" controls-position="right"
+                    style="width: 100px;" />
+                </template>
+              </el-table-column>
+              <el-table-column label="排序" width="130" align="center">
+                <template #default="scope">
+                  <el-input-number v-model="scope.row.sortCode" :min="0" controls-position="right"
+                    style="width: 100px;" />
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="90" align="center" fixed="right">
+                <template #default="scope">
+                  <el-button link type="danger" icon="Delete" style="white-space: nowrap;"
+                    @click="form.contracts.splice(scope.$index, 1)">
+                    移除
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+
+          <!-- 3. 员工上传材料卡片 -->
+          <div class="form-block-card">
+            <div class="block-card-header">
+              <span class="block-title">员工上传材料要求</span>
+              <span class="block-subtitle">勾选入职时要求候选人必须或可选上传的证件材料（如身份证、毕业证、体检表等）</span>
+            </div>
+
+            <el-table :data="materialTypes" border stripe height="240px" class="mt-2">
+              <el-table-column label="选择要求" width="85" align="center">
+                <template #default="scope">
+                  <el-checkbox :model-value="hasMaterial(scope.row.id)"
+                    @change="value => toggleMaterial(scope.row.id, Boolean(value))" />
+                </template>
+              </el-table-column>
+              <el-table-column prop="materialCode" label="材料编码" min-width="160" />
+              <el-table-column prop="materialName" label="材料名称" min-width="220" />
+              <el-table-column prop="maxFileCount" label="最多文件" width="100" align="center" />
+              <el-table-column label="必传" width="100" align="center">
+                <template #default="scope">
+                  <el-switch v-if="hasMaterial(scope.row.id)" v-model="materialConfig(scope.row.id)!.required" />
+                  <span v-else class="text-gray">-</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="排序" width="130" align="center">
+                <template #default="scope">
+                  <el-input-number v-if="hasMaterial(scope.row.id)" v-model="materialConfig(scope.row.id)!.sortCode"
+                    :min="0" controls-position="right" style="width: 100px;" />
+                  <span v-else class="text-gray">-</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-form>
+      </div>
 
       <template #footer>
         <el-button @click="visible = false">取消</el-button>
-        <el-button type="primary" :loading="saving" @click="save">保存</el-button>
+        <el-button type="primary" :loading="saving" @click="save">保存入职模板</el-button>
       </template>
     </el-dialog>
   </div>
@@ -213,28 +217,24 @@
 import { onMounted, reactive, ref } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import {
-  onboardingTaskApi,
-  type OnboardingCompanyOption,
-  type OnboardingContractTemplate,
-  type OnboardingContractVersion,
-  type OnboardingFormField,
-  type OnboardingMaterialType,
-  type OnboardingPositionOption,
-  type OnboardingTemplate,
-  type OnboardingTemplateContractConfig,
-  type OnboardingTemplateFieldConfig,
-  type OnboardingTemplateMaterialConfig
+  OnboardingCompany,
+  OnboardingContractTemplate,
+  OnboardingContractVersion,
+  OnboardingMaterialType,
+  OnboardingPosition,
+  OnboardingTemplate,
+  onboardingTaskApi
 } from "@/api/modules/biz/onboarding";
 
 const loading = ref(false);
 const saving = ref(false);
 const visible = ref(false);
-const total = ref(0);
 const rows = ref<OnboardingTemplate[]>([]);
-const companies = ref<OnboardingCompanyOption[]>([]);
-const positions = ref<OnboardingPositionOption[]>([]);
+const total = ref(0);
+
+const companies = ref<OnboardingCompany[]>([]);
+const positions = ref<OnboardingPosition[]>([]);
 const contractTemplates = ref<OnboardingContractTemplate[]>([]);
-const formFields = ref<OnboardingFormField[]>([]);
 const materialTypes = ref<OnboardingMaterialType[]>([]);
 const versionOptions = reactive<Record<number, OnboardingContractVersion[]>>({});
 
@@ -245,101 +245,80 @@ const query = reactive({
   pageSize: 20
 });
 
-const emptyForm = (): OnboardingTemplate => ({
-  id: undefined as unknown as number,
+const form = reactive<OnboardingTemplate>({
+  id: 0,
   templateCode: "",
   templateName: "",
-  companyId: undefined as unknown as number,
+  companyId: 0,
+  description: "",
+  status: "enable",
   positionIds: [],
   contracts: [],
   formFields: [],
-  materials: [],
-  status: "enable",
-  description: ""
+  materials: []
 });
-const form = reactive<OnboardingTemplate>(emptyForm());
 
 async function loadBaseData() {
-  try {
-    const [companyRes, contractRes, fieldRes, materialRes] = await Promise.all([
-      onboardingTaskApi.listCompanies().catch(() => ({ data: [] })),
-      onboardingTaskApi.templatePage({ pageNum: 1, pageSize: 100, status: "enable" }).catch(() => ({ data: { list: [] } })),
-      onboardingTaskApi.listFormFields().catch(() => ({ data: [] })),
-      onboardingTaskApi.listMaterialTypes().catch(() => ({ data: [] }))
-    ]);
-    companies.value = companyRes.data || [];
-    contractTemplates.value = contractRes.data?.list || [];
-    formFields.value = (fieldRes.data || []).filter(item => item.status === "enable");
-    materialTypes.value = (materialRes.data || []).filter(item => item.status === "enable");
-  } catch (e) {
-    console.error("加载基础数据失败", e);
-  }
+  const [companyRes, templateRes, materialRes] = await Promise.all([
+    onboardingTaskApi.companyPage({ pageNum: 1, pageSize: 100, status: "enable" }).catch(() => ({ data: { list: [] } })),
+    onboardingTaskApi.templatePage({ pageNum: 1, pageSize: 100, status: "enable" }).catch(() => ({ data: { list: [] } })),
+    onboardingTaskApi.listMaterialTypes().catch(() => ({ data: [] }))
+  ]);
+  companies.value = companyRes.data?.list || [];
+  contractTemplates.value = templateRes.data?.list || [];
+  materialTypes.value = materialRes.data || [];
 }
 
 async function loadTemplates() {
   loading.value = true;
   try {
-    const { data } = await onboardingTaskApi.onboardingTemplatePage(query);
-    rows.value = data?.list || [];
-    total.value = data?.total || 0;
+    const res = await onboardingTaskApi.onboardingTemplatePage(query);
+    rows.value = res.data?.list || [];
+    total.value = res.data?.total || 0;
   } finally {
     loading.value = false;
   }
 }
 
 function resetQuery() {
-  Object.assign(query, { keyword: "", companyId: undefined, pageNum: 1 });
+  query.keyword = "";
+  query.companyId = undefined;
+  query.pageNum = 1;
   loadTemplates();
 }
 
-async function loadPositions(companyId: number) {
-  const { data } = await onboardingTaskApi.listPositions(companyId);
-  positions.value = data || [];
-}
-
 async function onCompanyChange(companyId: number) {
   form.positionIds = [];
-  positions.value = [];
-  if (companyId) await loadPositions(companyId);
+  if (!companyId) {
+    positions.value = [];
+    return;
+  }
+  const res = await onboardingTaskApi.positionPage({ companyId, pageNum: 1, pageSize: 100, status: "enable" });
+  positions.value = res.data?.list || [];
+}
+
+async function onContractTemplateChange(row: any) {
+  row.contractTemplateVersionId = undefined;
+  if (!row.contractTemplateId) return;
+  await loadContractVersions(row.contractTemplateId);
+}
+
+async function loadContractVersions(templateId: number) {
+  if (versionOptions[templateId]) return;
+  const res = await onboardingTaskApi.versionPage({ templateId, pageNum: 1, pageSize: 100 });
+  versionOptions[templateId] = (res.data?.list || []).filter((it: any) => it.versionStatus === "enabled");
 }
 
 function addContract() {
   form.contracts.push({
-    contractTemplateId: undefined as unknown as number,
-    contractTemplateVersionId: undefined as unknown as number,
+    contractTemplateId: undefined as any,
+    contractTemplateVersionId: undefined as any,
     required: true,
     printCopies: 1,
     sortCode: (form.contracts.length + 1) * 10
   });
 }
 
-async function loadVersions(templateId: number) {
-  if (!templateId || versionOptions[templateId]) return;
-  const { data } = await onboardingTaskApi.versionPage({ templateId, pageNum: 1, pageSize: 100 });
-  versionOptions[templateId] = (data?.list || []).filter(item => item.versionStatus === "enabled");
-}
-
-async function onContractTemplateChange(row: OnboardingTemplateContractConfig) {
-  row.contractTemplateVersionId = undefined as unknown as number;
-  await loadVersions(row.contractTemplateId);
-}
-
-function hasField(fieldId: number) {
-  return form.formFields.some(item => item.fieldId === fieldId);
-}
-
-function fieldConfig(fieldId: number) {
-  return form.formFields.find(item => item.fieldId === fieldId);
-}
-
-function toggleField(fieldId: number, selected: boolean) {
-  if (selected && !hasField(fieldId)) {
-    form.formFields.push({ fieldId, required: true, sortCode: (form.formFields.length + 1) * 10 });
-  } else if (!selected) {
-    form.formFields = form.formFields.filter(item => item.fieldId !== fieldId);
-  }
-}
-
 function hasMaterial(materialTypeId: number) {
   return form.materials.some(item => item.materialTypeId === materialTypeId);
 }
@@ -348,35 +327,77 @@ function materialConfig(materialTypeId: number) {
   return form.materials.find(item => item.materialTypeId === materialTypeId);
 }
 
-function toggleMaterial(materialTypeId: number, selected: boolean) {
-  if (selected && !hasMaterial(materialTypeId)) {
-    form.materials.push({ materialTypeId, required: true, sortCode: (form.materials.length + 1) * 10 });
-  } else if (!selected) {
+function toggleMaterial(materialTypeId: number, checked: boolean) {
+  if (checked) {
+    if (!hasMaterial(materialTypeId)) {
+      form.materials.push({ materialTypeId, required: true, sortCode: (form.materials.length + 1) * 10 });
+    }
+  } else {
     form.materials = form.materials.filter(item => item.materialTypeId !== materialTypeId);
   }
 }
 
 async function openCreate() {
-  Object.assign(form, emptyForm());
-  positions.value = [];
   await loadBaseData();
+  Object.assign(form, {
+    id: undefined,
+    templateCode: "",
+    templateName: "",
+    companyId: undefined as any,
+    description: "",
+    status: "enable",
+    positionIds: [],
+    contracts: [],
+    formFields: [],
+    materials: []
+  });
+  positions.value = [];
   visible.value = true;
 }
 
 async function openEdit(row: OnboardingTemplate) {
   await loadBaseData();
-  const { data } = await onboardingTaskApi.onboardingTemplateDetail({ id: row.id! });
-  Object.assign(form, emptyForm(), data);
-  await loadPositions(form.companyId);
-  await Promise.all(form.contracts.map(item => loadVersions(item.contractTemplateId)));
+  const res = await onboardingTaskApi.onboardingTemplateDetail({ id: row.id! });
+  const detail = res.data;
+  Object.assign(form, {
+    id: detail.id,
+    templateCode: detail.templateCode,
+    templateName: detail.templateName,
+    companyId: detail.companyId,
+    description: detail.description,
+    status: detail.status,
+    positionIds: detail.positionIds || [],
+    contracts: (detail.contracts || []).map((item: any) => ({
+      contractTemplateId: item.contractTemplateId,
+      contractTemplateVersionId: item.contractTemplateVersionId,
+      required: item.required,
+      printCopies: item.printCopies || 1,
+      sortCode: item.sortCode || 10
+    })),
+    formFields: [],
+    materials: (detail.materials || []).map((item: any) => ({
+      materialTypeId: item.materialTypeId,
+      required: item.required,
+      sortCode: item.sortCode || 10
+    }))
+  });
+
+  if (form.companyId) {
+    const posRes = await onboardingTaskApi.positionPage({ companyId: form.companyId, pageNum: 1, pageSize: 100, status: "enable" });
+    positions.value = posRes.data?.list || [];
+  }
+  for (const contract of form.contracts) {
+    if (contract.contractTemplateId) {
+      await loadContractVersions(contract.contractTemplateId);
+    }
+  }
   visible.value = true;
 }
 
 async function save() {
-  if (!form.templateCode.trim() || !form.templateName.trim() || !form.companyId) {
-    return ElMessage.warning("请填写模板编码、模板名称和所属公司");
+  if (!form.templateCode || !form.templateName || !form.companyId || !form.positionIds.length) {
+    return ElMessage.warning("请完整填写模板编码、名称、公司及适用岗位");
   }
-  if (!form.positionIds.length) return ElMessage.warning("请至少选择一个适用岗位");
   if (!form.contracts.length || form.contracts.some(item => !item.contractTemplateId || !item.contractTemplateVersionId)) {
     return ElMessage.warning("请完整选择至少一份合同模板及版本");
   }
@@ -396,6 +417,7 @@ async function removeTemplate(row: OnboardingTemplate) {
   await ElMessageBox.confirm(`确认删除入职模板“${row.templateName}”吗？`, "删除确认", { type: "warning" });
   await onboardingTaskApi.deleteOnboardingTemplate([row.id!]);
   ElMessage.success("删除成功");
+  query.pageNum = 1;
   await loadTemplates();
 }
 
@@ -406,48 +428,97 @@ onMounted(async () => {
 
 <style scoped>
 .template-panel {
-  padding-top: 4px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
 }
 
 .toolbar {
   display: flex;
   align-items: center;
   gap: 10px;
-  margin-bottom: 14px;
+  margin-bottom: 10px;
+  flex-shrink: 0;
 }
 
 .keyword-input {
-  width: 260px;
+  width: 220px;
 }
 
 .company-filter {
-  width: 220px;
+  width: 180px;
 }
 
 .toolbar-spacer {
   flex: 1;
 }
 
-.tip,
-.section-tip {
-  margin-bottom: 14px;
+.tip {
+  margin-bottom: 10px;
+  flex-shrink: 0;
+}
+
+.table-container {
+  flex: 1;
+  height: 0;
+  overflow: hidden;
 }
 
 .pagination {
+  margin-top: 12px;
   display: flex;
   justify-content: flex-end;
-  margin-top: 16px;
+  flex-shrink: 0;
 }
 
 .full-width {
   width: 100%;
 }
 
-.section-action {
+.mt-2 {
+  margin-top: 8px;
+}
+
+.text-gray {
+  color: #94a3b8;
+}
+
+/* 弹窗内部卡片样式 */
+.template-dialog-body {
+  max-height: 72vh;
+  overflow-y: auto;
+  padding-right: 6px;
+}
+
+.form-block-card {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px 18px;
+  margin-bottom: 16px;
+}
+
+.block-card-header {
+  margin-bottom: 14px;
+}
+
+.flex-between {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 10px;
-  color: var(--el-text-color-secondary);
 }
-</style>
\ No newline at end of file
+
+.block-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: #0f172a;
+  margin-right: 10px;
+}
+
+.block-subtitle {
+  font-size: 12px;
+  color: #64748b;
+}
+</style>
diff --git a/src/views/biz/onboarding/entry-config/components/VariableDefinitionPanel.vue b/src/views/biz/onboarding/entry-config/components/VariableDefinitionPanel.vue
new file mode 100644
index 0000000..1b195b1
--- /dev/null
+++ b/src/views/biz/onboarding/entry-config/components/VariableDefinitionPanel.vue
@@ -0,0 +1,359 @@
+<template>
+  <div class="variable-panel">
+    <div class="toolbar">
+      <el-input
+        v-model="query.keyword"
+        placeholder="搜索变量编码 / 变量名称"
+        clearable
+        style="width: 240px"
+        @keyup.enter="loadData"
+        @clear="loadData"
+      />
+      <el-select
+        v-model="query.variableCategory"
+        placeholder="变量分类"
+        clearable
+        style="width: 180px"
+        @change="loadData"
+      >
+        <el-option label="全部变量分类" value="" />
+        <el-option label="员工登记表变量 (employee)" value="employee" />
+        <el-option label="人事合同参数 (hr)" value="hr" />
+        <el-option label="公司信息变量 (company)" value="company" />
+        <el-option label="系统预置变量 (system)" value="system" />
+      </el-select>
+      <el-button type="primary" icon="Search" @click="loadData">查询</el-button>
+      <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      <div class="spacer"></div>
+      <el-button type="primary" icon="Plus" @click="openCreate">新增自定义变量</el-button>
+    </div>
+
+    <el-alert
+      title="变量字典库定义了合同 DOCX 中所有合法的占位符（如 {{employee.EmployeeName}}）。上传 Word 时系统会自动校验占位符是否在此字典中，防止拼写错误。"
+      type="info"
+      show-icon
+      :closable="false"
+      class="tip-alert"
+    />
+
+    <div class="table-container">
+      <el-table :data="tableData" border stripe height="100%" v-loading="loading">
+        <el-table-column prop="variableCode" label="变量全编码 (DOCX占位符)" min-width="260">
+          <template #default="{ row }">
+            <div class="code-col">
+              <el-tag :type="categoryTag(row.variableCategory)" effect="light" size="small" class="tag-badge">
+                {{ categoryText(row.variableCategory) }}
+              </el-tag>
+              <code class="code-font">{{ formatPlaceholder(row.variableCode) }}</code>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="variableName" label="中文显示名称" min-width="160" />
+
+        <el-table-column prop="dataType" label="数据类型" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag size="small" type="info">{{ row.dataType || 'string' }}</el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="isBuiltIn" label="内置标准" width="120" align="center">
+          <template #default="{ row }">
+            <el-tag size="small" :type="row.isBuiltIn ? 'success' : 'warning'">
+              {{ row.isBuiltIn ? '入职登记表' : '自定义' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="required" label="必填" width="80" align="center">
+          <template #default="{ row }">
+            <el-tag size="small" :type="row.required ? 'danger' : 'info'">
+              {{ row.required ? '是' : '否' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="remark" label="说明备注" min-width="200" show-overflow-tooltip />
+
+        <el-table-column label="操作" width="140" align="center" fixed="right">
+          <template #default="{ row }">
+            <el-button link type="primary" icon="Edit" @click="openEdit(row)">编辑</el-button>
+            <el-button
+              v-if="!row.isBuiltIn"
+              link
+              type="danger"
+              icon="Delete"
+              @click="remove(row)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div class="pagination-box">
+      <el-pagination
+        v-model:current-page="query.pageNum"
+        v-model:page-size="query.pageSize"
+        :total="total"
+        :page-sizes="[20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="loadData"
+        @current-change="loadData"
+      />
+    </div>
+
+    <!-- 弹窗 -->
+    <el-dialog v-model="visible" :title="form.id ? '编辑变量' : '新增自定义变量'" width="560px" destroy-on-close>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="110px">
+        <el-form-item label="变量分类" prop="variableCategory" required>
+          <el-select v-model="form.variableCategory" :disabled="form.isBuiltIn" style="width: 100%">
+            <el-option label="员工变量 (employee.)" value="employee" />
+            <el-option label="人事合同参数 (hr.)" value="hr" />
+            <el-option label="公司信息 (company.)" value="company" />
+            <el-option label="系统变量 (system.)" value="system" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="变量全编码" prop="variableCode" required>
+          <el-input
+            v-model="form.variableCode"
+            placeholder="如 employee.WeChat 或 hr.SpecialSubsidy"
+            :disabled="Boolean(form.id)"
+          />
+          <div class="form-tip">规范格式：分类.变量名，例如 employee.CarNo</div>
+        </el-form-item>
+
+        <el-form-item label="中文名称" prop="variableName" required>
+          <el-input v-model="form.variableName" placeholder="如 微信号、特殊津贴" />
+        </el-form-item>
+
+        <el-form-item label="数据类型">
+          <el-select v-model="form.dataType" style="width: 100%">
+            <el-option label="文本 (string)" value="string" />
+            <el-option label="数字 / 金额 (number)" value="number" />
+            <el-option label="日期 (date)" value="date" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="默认值">
+          <el-input v-model="form.defaultValue" placeholder="未填写时的默认值" />
+        </el-form-item>
+
+        <el-form-item label="是否必填">
+          <el-switch v-model="form.required" />
+        </el-form-item>
+
+        <el-form-item label="排序码">
+          <el-input-number v-model="form.sortCode" :min="1" :max="9999" />
+        </el-form-item>
+
+        <el-form-item label="说明备注">
+          <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="变量业务说明" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="visible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="save">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
+import { onboardingTaskApi } from "@/api/modules/biz/onboarding";
+
+const loading = ref(false);
+const saving = ref(false);
+const visible = ref(false);
+const tableData = ref<any[]>([]);
+const total = ref(0);
+const formRef = ref<FormInstance>();
+
+const query = reactive({
+  keyword: "",
+  variableCategory: "",
+  pageNum: 1,
+  pageSize: 50
+});
+
+const form = reactive<any>({
+  id: undefined,
+  variableCode: "",
+  variableName: "",
+  variableCategory: "employee",
+  dataType: "string",
+  defaultValue: "",
+  isBuiltIn: false,
+  required: false,
+  sortCode: 100,
+  remark: ""
+});
+
+const rules: FormRules = {
+  variableCode: [{ required: true, message: "请输入变量编码", trigger: "blur" }],
+  variableName: [{ required: true, message: "请输入中文显示名称", trigger: "blur" }],
+  variableCategory: [{ required: true, message: "请选择分类", trigger: "change" }]
+};
+
+function categoryTag(cat: string) {
+  switch (cat) {
+    case "employee": return "primary";
+    case "hr": return "warning";
+    case "company": return "success";
+    default: return "info";
+  }
+}
+
+function categoryText(cat: string) {
+  switch (cat) {
+    case "employee": return "员工变量";
+    case "hr": return "人事参数";
+    case "company": return "公司信息";
+    default: return "系统变量";
+  }
+}
+
+function formatPlaceholder(code?: string) {
+  return code ? `{{${code}}}` : "";
+}
+
+async function loadData() {
+  loading.value = true;
+  try {
+    const res = await onboardingTaskApi.variableDefinitionPage(query);
+    tableData.value = res.data?.list || [];
+    total.value = res.data?.total || 0;
+  } finally {
+    loading.value = false;
+  }
+}
+
+function resetQuery() {
+  query.keyword = "";
+  query.variableCategory = "";
+  query.pageNum = 1;
+  loadData();
+}
+
+function openCreate() {
+  Object.assign(form, {
+    id: undefined,
+    variableCode: "",
+    variableName: "",
+    variableCategory: "employee",
+    dataType: "string",
+    defaultValue: "",
+    isBuiltIn: false,
+    required: false,
+    sortCode: 100,
+    remark: ""
+  });
+  visible.value = true;
+}
+
+function openEdit(row: any) {
+  Object.assign(form, {
+    id: row.id,
+    variableCode: row.variableCode,
+    variableName: row.variableName,
+    variableCategory: row.variableCategory,
+    dataType: row.dataType || "string",
+    defaultValue: row.defaultValue || "",
+    isBuiltIn: row.isBuiltIn || false,
+    required: row.required || false,
+    sortCode: row.sortCode || 100,
+    remark: row.remark || ""
+  });
+  visible.value = true;
+}
+
+async function save() {
+  await formRef.value?.validate();
+  saving.value = true;
+  try {
+    if (form.id) {
+      await onboardingTaskApi.editVariableDefinition(form);
+      ElMessage.success("变量修改成功");
+    } else {
+      await onboardingTaskApi.addVariableDefinition(form);
+      ElMessage.success("自定义变量添加成功");
+    }
+    visible.value = false;
+    loadData();
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function remove(row: any) {
+  await ElMessageBox.confirm(`确认删除自定义变量“${row.variableCode}”？`, "删除确认", { type: "warning" });
+  await onboardingTaskApi.deleteVariableDefinitions([row.id]);
+  ElMessage.success("删除成功");
+  loadData();
+}
+
+onMounted(loadData);
+</script>
+
+<style scoped>
+.variable-panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+  flex-shrink: 0;
+}
+.spacer {
+  flex: 1;
+}
+.tip-alert {
+  margin-bottom: 10px;
+  flex-shrink: 0;
+}
+.table-container {
+  flex: 1;
+  height: 0;
+  overflow: hidden;
+}
+.code-col {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+.tag-badge {
+  flex-shrink: 0;
+}
+.code-font {
+  font-family: Consolas, Monaco, monospace;
+  font-weight: 600;
+  color: #b45309;
+  background: #fef3c7;
+  padding: 2px 6px;
+  border-radius: 4px;
+  white-space: nowrap;
+}
+.pagination-box {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 12px;
+  flex-shrink: 0;
+}
+.form-tip {
+  font-size: 12px;
+  color: #94a3b8;
+  margin-top: 4px;
+}
+</style>
diff --git a/src/views/biz/onboarding/entry-config/index.vue b/src/views/biz/onboarding/entry-config/index.vue
index 1a64136..eedad71 100644
--- a/src/views/biz/onboarding/entry-config/index.vue
+++ b/src/views/biz/onboarding/entry-config/index.vue
@@ -1,58 +1,24 @@
-<template>
+<template>
   <div class="main-box config-container">
     <el-tabs v-model="activeTab" class="config-tabs">
-      <el-tab-pane label="动态填写字段" name="fields">
+      <el-tab-pane label="合同变量字典" name="variables">
         <div class="tab-card-wrapper">
-          <div class="toolbar">
-            <el-button type="primary" icon="Plus" @click="openFieldCreate">
-              新增字段
-            </el-button>
-          </div>
-
-        <el-table :data="fields" border stripe>
-          <el-table-column prop="fieldCode" label="字段编码" min-width="140" />
-          <el-table-column prop="fieldName" label="字段名称" min-width="150" />
-          <el-table-column prop="dataType" label="数据类型" width="120" align="center">
-            <template #default="scope">
-              <el-tag size="small" type="info">{{ scope.row.dataType }}</el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column prop="placeholder" label="提示语" min-width="160" />
-          <el-table-column prop="status" label="状态" width="100" align="center">
-            <template #default="scope">
-              <el-tag size="small" :type="scope.row.status === 'enable' ? 'success' : 'info'">
-                {{ scope.row.status === 'enable' ? '启用' : '停用' }}
-              </el-tag>
-            </template>
-          </el-table-column>
-
-          <el-table-column label="操作" width="150" fixed="right">
-            <template #default="scope">
-              <el-button link type="primary" icon="Edit" @click="openFieldEdit(scope.row)">
-                编辑
-              </el-button>
-
-              <el-button link type="danger" icon="Delete" @click="removeField(scope.row)">
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
+          <VariableDefinitionPanel />
         </div>
       </el-tab-pane>
 
       <el-tab-pane label="上传资料类型" name="materials">
-        <div class="tab-card-wrapper">
+        <div class="tab-card-wrapper material-tab-wrapper">
           <div class="toolbar">
             <el-button type="primary" icon="Plus" @click="openMaterialCreate">
               新增资料类型
             </el-button>
           </div>
 
-          <el-table :data="materialTypes" border stripe>
+          <el-table :data="materialTypes" border stripe height="100%">
             <el-table-column prop="materialCode" label="资料编码" min-width="140" />
             <el-table-column prop="materialName" label="资料名称" min-width="150" />
-            <el-table-column prop="allowedExtensions" label="允许扩展名" min-width="140">
+            <el-table-column prop="allowedExtensions" label="允许扩展名" min-width="160">
               <template #default="scope">
                 <code>{{ scope.row.allowedExtensions || '不限' }}</code>
               </template>
@@ -67,7 +33,7 @@
               </template>
             </el-table-column>
 
-            <el-table-column label="操作" width="150" fixed="right">
+            <el-table-column label="操作" width="150" fixed="right" align="center">
               <template #default="scope">
                 <el-button link type="primary" icon="Edit" @click="openMaterialEdit(scope.row)">
                   编辑
@@ -89,60 +55,9 @@
       </el-tab-pane>
     </el-tabs>
 
-    <el-dialog v-model="fieldVisible" :title="fieldForm.id ? '编辑字段' : '新增字段'" width="560px" destroy-on-close>
-      <el-form :model="fieldForm" label-width="110px">
-        <el-form-item label="字段编码" required>
-          <el-input v-model="fieldForm.fieldCode" />
-        </el-form-item>
-
-        <el-form-item label="字段名称" required>
-          <el-input v-model="fieldForm.fieldName" />
-        </el-form-item>
-
-        <el-form-item label="数据类型" required>
-          <el-select v-model="fieldForm.dataType">
-            <el-option label="文本" value="string" />
-            <el-option label="日期" value="date" />
-            <el-option label="整数" value="int" />
-            <el-option label="数字" value="number" />
-            <el-option label="金额" value="decimal" />
-            <el-option label="下拉选择" value="select" />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="提示语">
-          <el-input v-model="fieldForm.placeholder" />
-        </el-form-item>
-
-        <el-form-item label="选项JSON">
-          <el-input v-model="fieldForm.optionsJson" type="textarea" placeholder="下拉/多选字段可填写选项JSON" />
-        </el-form-item>
-
-        <el-form-item label="校验规则">
-          <el-input v-model="fieldForm.validationRule" />
-        </el-form-item>
-
-        <el-form-item label="状态">
-          <el-select v-model="fieldForm.status">
-            <el-option label="启用" value="enable" />
-            <el-option label="停用" value="disable" />
-          </el-select>
-        </el-form-item>
-      </el-form>
-
-      <template #footer>
-        <el-button @click="fieldVisible = false">
-          取消
-        </el-button>
-
-        <el-button type="primary" @click="saveField">
-          保存
-        </el-button>
-      </template>
-    </el-dialog>
-
+    <!-- 资料类型弹窗 -->
     <el-dialog v-model="materialVisible" :title="materialForm.id ? '编辑资料类型' : '新增资料类型'" width="560px" destroy-on-close>
-      <el-form :model="materialForm" label-width="120px">
+      <el-form :model="materialForm" label-width="110px">
         <el-form-item label="资料编码" required>
           <el-input v-model="materialForm.materialCode" />
         </el-form-item>
@@ -152,110 +67,72 @@
         </el-form-item>
 
         <el-form-item label="允许扩展名">
-          <el-input v-model="materialForm.allowedExtensions" placeholder="如：jpg,png,pdf" />
+          <el-input v-model="materialForm.allowedExtensions" placeholder="逗号分隔，如：png,jpg,jpeg,pdf" />
         </el-form-item>
 
-        <el-form-item label="最大文件数量">
-          <el-input-number v-model="materialForm.maxFileCount" :min="1" />
+        <el-form-item label="最大文件数">
+          <el-input-number v-model="materialForm.maxFileCount" :min="1" :max="10" />
         </el-form-item>
 
-        <el-form-item label="最大大小(MB)">
-          <el-input-number v-model="materialForm.maxFileSizeMb" :min="1" />
+        <el-form-item label="单文件大小(MB)">
+          <el-input-number v-model="materialForm.maxFileSizeMb" :min="1" :max="100" />
         </el-form-item>
 
         <el-form-item label="状态">
-          <el-select v-model="materialForm.status">
-            <el-option label="启用" value="enable" />
-            <el-option label="停用" value="disable" />
-          </el-select>
+          <el-radio-group v-model="materialForm.status">
+            <el-radio label="enable">启用</el-radio>
+            <el-radio label="disable">停用</el-radio>
+          </el-radio-group>
         </el-form-item>
       </el-form>
 
       <template #footer>
-        <el-button @click="materialVisible = false">
-          取消
-        </el-button>
-
-        <el-button type="primary" @click="saveMaterial">
-          保存
-        </el-button>
+        <el-button @click="materialVisible = false">取消</el-button>
+        <el-button type="primary" @click="saveMaterial">保存</el-button>
       </template>
     </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts" name="onboardingEntryConfig">
+import { onMounted, reactive, ref } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
 import {
-  onboardingTaskApi,
-  type OnboardingFormField,
-  type OnboardingMaterialType
+  OnboardingMaterialType,
+  onboardingTaskApi
 } from "@/api/modules/biz/onboarding";
 import OnboardingTemplatePanel from "./components/OnboardingTemplatePanel.vue";
+import VariableDefinitionPanel from "./components/VariableDefinitionPanel.vue";
 
-const activeTab = ref("fields");
-const fields = ref<OnboardingFormField[]>([]);
+const activeTab = ref("variables");
 const materialTypes = ref<OnboardingMaterialType[]>([]);
-const fieldVisible = ref(false);
+
 const materialVisible = ref(false);
-const fieldForm = reactive<Partial<OnboardingFormField>>({});
-const materialForm = reactive<Partial<OnboardingMaterialType>>({});
 
-async function loadBase() {
-  const [fieldResult, materialResult] = await Promise.all([
-    onboardingTaskApi.listFormFields(),
-    onboardingTaskApi.listMaterialTypes()
-  ]);
-  fields.value = fieldResult.data || [];
-  materialTypes.value = materialResult.data || [];
+const materialForm = reactive<Partial<OnboardingMaterialType>>({
+  materialCode: "",
+  materialName: "",
+  allowedExtensions: "png,jpg,jpeg,pdf",
+  maxFileCount: 3,
+  maxFileSizeMb: 10,
+  status: "enable"
+});
+
+async function loadMaterials() {
+  const res = await onboardingTaskApi.listMaterialTypes();
+  materialTypes.value = res.data || [];
 }
 
-function resetField() {
-  Object.assign(fieldForm, {
-    id: undefined,
-    fieldCode: "",
-    fieldName: "",
-    dataType: "string",
-    placeholder: "",
-    optionsJson: "",
-    validationRule: "",
-    status: "enable"
-  });
-}
-
-function resetMaterial() {
+function openMaterialCreate() {
   Object.assign(materialForm, {
     id: undefined,
     materialCode: "",
     materialName: "",
-    allowedExtensions: "",
-    maxFileCount: 1,
-    maxFileSizeMb: undefined,
+    allowedExtensions: "png,jpg,jpeg,pdf",
+    maxFileCount: 3,
+    maxFileSizeMb: 10,
     status: "enable"
   });
-}
-
-function openFieldCreate() {
-  resetField();
-  fieldVisible.value = true;
-}
-
-function openFieldEdit(row: OnboardingFormField) {
-  Object.assign(fieldForm, row);
-  fieldVisible.value = true;
-}
-
-async function saveField() {
-  if (!fieldForm.fieldCode || !fieldForm.fieldName || !fieldForm.dataType) {
-    return ElMessage.warning("请填写字段编码、名称和数据类型");
-  }
-  await onboardingTaskApi.saveFormField(fieldForm);
-  fieldVisible.value = false;
-  ElMessage.success("保存成功");
-  await loadBase();
-}
-
-function openMaterialCreate() {
-  resetMaterial();
   materialVisible.value = true;
 }
 
@@ -266,29 +143,24 @@ function openMaterialEdit(row: OnboardingMaterialType) {
 
 async function saveMaterial() {
   if (!materialForm.materialCode || !materialForm.materialName) {
-    return ElMessage.warning("请填写资料编码和名称");
+    return ElMessage.warning("请填写资料编码和资料名称");
   }
   await onboardingTaskApi.saveMaterialType(materialForm);
+  ElMessage.success("资料类型保存成功");
   materialVisible.value = false;
-  ElMessage.success("保存成功");
-  await loadBase();
-}
-
-async function removeField(row: OnboardingFormField) {
-  await ElMessageBox.confirm(`确认删除字段“${row.fieldName}”？`, "删除确认");
-  await onboardingTaskApi.deleteFormFields([row.id]);
-  ElMessage.success("删除成功");
-  await loadBase();
+  await loadMaterials();
 }
 
 async function removeMaterial(row: OnboardingMaterialType) {
-  await ElMessageBox.confirm(`确认删除资料类型“${row.materialName}”？`, "删除确认");
-  await onboardingTaskApi.deleteMaterialTypes([row.id]);
+  await ElMessageBox.confirm(`确认删除资料类型“${row.materialName}”吗？`, "删除确认", { type: "warning" });
+  await onboardingTaskApi.deleteMaterialTypes([row.id!]);
   ElMessage.success("删除成功");
-  await loadBase();
+  await loadMaterials();
 }
 
-onMounted(loadBase);
+onMounted(() => {
+  loadMaterials();
+});
 </script>
 
 <style scoped>
@@ -318,21 +190,34 @@ onMounted(loadBase);
 
 .config-tabs :deep(.el-tabs__content) {
   flex: 1;
-  overflow: auto;
+  height: 0;
+  overflow: hidden;
+}
+
+.config-tabs :deep(.el-tab-pane) {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .tab-card-wrapper {
+  height: 100%;
+  width: 100%;
   background: #fff;
   border-radius: 8px;
   padding: 16px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.material-tab-wrapper {
+  display: flex;
+  flex-direction: column;
 }
 
 .toolbar {
-  margin-bottom: 14px;
-}
-
-.hint {
-  margin-bottom: 14px;
+  margin-bottom: 12px;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/onboarding/fill/index.vue b/src/views/onboarding/fill/index.vue
index 312f9fa..b0c06e5 100644
--- a/src/views/onboarding/fill/index.vue
+++ b/src/views/onboarding/fill/index.vue
@@ -8,13 +8,12 @@
           <span>OnboardX 智能入职系统</span>
         </div>
         <h1 class="brand-title">欢迎加入我们</h1>
-        <p class="brand-subtitle">请按照指引完成入职信息登记、证件材料上传与合同确认</p>
+        <p class="brand-subtitle">请按照指引完成入职登记表填写、证件材料上传与合同查阅确认</p>
       </div>
     </header>
 
     <!-- 容器卡片 -->
     <div class="main-container">
-      <!-- 错误状态提示 -->
       <el-result v-if="error" icon="error" title="访问受限" :sub-title="error">
         <template #extra>
           <el-button type="primary" @click="load">重新加载</el-button>
@@ -35,66 +34,8 @@
           </div>
         </div>
 
-        <!-- 驳回原因提醒 -->
-        <el-alert
-          v-if="task.rejectReason && task.taskStatus === 'rejected'"
-          :title="`退回修改说明：${task.rejectReason}`"
-          type="warning"
-          show-icon
-          :closable="false"
-          class="alert-box"
-        />
-
-        <!-- 已提交/审核中/已完成 状态看板（非编辑状态） -->
-        <div v-if="!canEdit && !showEditView" class="status-card">
-          <div class="timeline-box">
-            <h3 class="timeline-title">入职办理进度</h3>
-            <el-timeline>
-              <el-timeline-item
-                type="success"
-                :timestamp="task.createTime"
-                placement="top"
-              >
-                <h4>入职任务发起</h4>
-                <p>人事已创建您的入职向导</p>
-              </el-timeline-item>
-
-              <el-timeline-item
-                :type="task.lastSubmittedAt ? 'success' : 'primary'"
-                :timestamp="task.lastSubmittedAt || '进行中'"
-                placement="top"
-              >
-                <h4>资料提交</h4>
-                <p v-if="task.lastSubmittedAt">已完成资料填写与合同确认并提交审核</p>
-                <p v-else>等待候选人填写提交</p>
-              </el-timeline-item>
-
-              <el-timeline-item
-                :type="task.taskStatus === 'approved' || task.taskStatus === 'archived' ? 'success' : task.taskStatus === 'reviewing' ? 'warning' : 'info'"
-                :timestamp="task.auditedAt || (task.taskStatus === 'reviewing' ? '审核中' : '待处理')"
-                placement="top"
-              >
-                <h4>人事复核与建档</h4>
-                <p v-if="task.taskStatus === 'approved' || task.taskStatus === 'archived'">
-                  审核通过！已为您建立正式员工档案与合同归档。
-                </p>
-                <p v-else-if="task.taskStatus === 'reviewing'">
-                  人事正在复核您的入职材料与合同，请耐心等待通知。
-                </p>
-                <p v-else>待人事审核</p>
-              </el-timeline-item>
-            </el-timeline>
-          </div>
-
-          <div class="view-toggle-action">
-            <el-button plain type="primary" @click="showEditView = true">
-              查看已填报资料详情
-            </el-button>
-          </div>
-        </div>
-
-        <!-- 分步向导模式（填写或只读查看） -->
-        <div v-if="canEdit || showEditView" class="wizard-card">
+        <!-- 分步向导模式 -->
+        <div class="wizard-card">
           <div v-if="!canEdit" class="readonly-banner">
             <el-alert
               title="当前为只读查阅模式（资料已提交审核）"
@@ -107,201 +48,321 @@
           <!-- 步骤导航条 -->
           <div class="steps-wrapper">
             <el-steps :active="currentStep" finish-status="success" align-center>
-              <el-step title="基本信息" icon="User" />
-              <el-step v-if="formFields.length" title="补充信息" icon="Document" />
+              <el-step title="入职登记表" icon="User" />
+              <el-step title="合同补充项" icon="Document" />
               <el-step title="证件材料" icon="FolderChecked" />
               <el-step title="合同确认" icon="Tickets" />
             </el-steps>
           </div>
 
-          <!-- 步骤 1: 基本信息 -->
-          <div v-show="activeStepKey === 'base'" class="step-content">
-            <div class="section-header">
-              <h3 class="section-title">个人基本信息</h3>
-              <p class="section-desc">请准确填写您的真实姓名、身份证号码及有效联系方式</p>
+          <!-- 步骤 1: 入职登记表 -->
+          <div v-show="currentStep === 0" class="step-content">
+            <div class="registration-header">
+              <h2 class="reg-title">入 职 登 记 表</h2>
+              <p class="reg-subtitle">请准确填写您的真实个人档案、学习经历与家庭信息</p>
             </div>
 
-            <el-form ref="baseFormRef" :model="form" :rules="baseRules" label-position="top">
-              <el-row :gutter="16">
-                <el-col :xs="24" :sm="12">
-                  <el-form-item label="真实姓名" prop="employeeName">
-                    <el-input
-                      v-model="form.employeeName"
-                      placeholder="请输入姓名"
-                      :disabled="!canEdit"
-                      clearable
-                    />
-                  </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12">
-                  <el-form-item label="手机号码" prop="phone">
-                    <el-input
-                      v-model="form.phone"
-                      placeholder="请输入11位手机号"
-                      :disabled="!canEdit"
-                      maxlength="11"
-                      clearable
-                    />
-                  </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12">
-                  <el-form-item label="身份证号码" prop="idCardNumber">
-                    <el-input
-                      v-model="form.idCardNumber"
-                      placeholder="请输入18位身份证号"
-                      :disabled="!canEdit"
-                      maxlength="18"
-                      clearable
-                    />
-                  </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="6">
-                  <el-form-item label="性别">
-                    <el-select v-model="form.gender" placeholder="请选择性别" :disabled="!canEdit" class="full-width">
-                      <el-option label="男" value="男" />
-                      <el-option label="女" value="女" />
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="6">
-                  <el-form-item label="民族">
-                    <el-input v-model="form.nation" placeholder="如：汉族" :disabled="!canEdit" clearable />
-                  </el-form-item>
-                </el-col>
-                <el-col :xs="24">
-                  <el-form-item label="现居住/通讯地址" prop="contactAddress">
-                    <el-input
-                      v-model="form.contactAddress"
-                      type="textarea"
-                      :rows="2"
-                      placeholder="请输入详细现居/通讯地址"
-                      :disabled="!canEdit"
-                    />
-                  </el-form-item>
-                </el-col>
-              </el-row>
+            <el-form ref="regFormRef" :model="form" :rules="regRules" label-position="top" class="reg-form">
+              <!-- 1. 基本信息板块 -->
+              <div class="card-section">
+                <div class="card-section-title">
+                  <el-icon><UserFilled /></el-icon> 基本个人信息
+                </div>
+                <el-row :gutter="16">
+                  <el-col :xs="24" :sm="8">
+                    <el-form-item label="真实姓名" prop="employeeName">
+                      <el-input v-model="form.employeeName" placeholder="请输入真实姓名" :disabled="!canEdit" clearable />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :xs="12" :sm="8">
+                    <el-form-item label="性别" prop="gender">
+                      <el-select v-model="form.gender" placeholder="请选择性别" :disabled="!canEdit" class="full-width">
+                        <el-option label="男" value="男" />
+                        <el-option label="女" value="女" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :xs="12" :sm="8">
+                    <el-form-item label="民族" prop="nation">
+                      <el-input v-model="form.nation" placeholder="如 汉族" :disabled="!canEdit" clearable />
+                    </el-form-item>
+                  </el-col>
 
-              <div class="sub-section-title">
-                <span>工资银行卡信息 (发薪与合同登记)</span>
-              </div>
-              <el-row :gutter="16">
-                <el-col :xs="24" :sm="12">
-                  <el-form-item label="工资银行卡号" prop="bankCardNumber">
-                    <el-input
-                      v-model="form.bankCardNumber"
-                      placeholder="请输入本人借记卡卡号"
-                      :disabled="!canEdit"
-                      clearable
-                    />
-                  </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12">
-                  <el-form-item label="开户银行名称">
-                    <el-input
-                      v-model="form.bankName"
-                      placeholder="如：中国工商银行北京分行"
-                      :disabled="!canEdit"
-                      clearable
-                    />
-                  </el-form-item>
-                </el-col>
-              </el-row>
+                  <el-col :xs="24" :sm="8">
+                    <el-form-item label="出生年月日" prop="birthday">
+                      <el-date-picker v-model="form.birthday" type="date" value-format="YYYY-MM-DD" placeholder="选择出生日期" :disabled="!canEdit" class="full-width" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :xs="24" :sm="8">
+                    <el-form-item label="户籍所在地" prop="registeredResidence">
+                      <el-input v-model="form.registeredResidence" placeholder="如 某省某市某区/县" :disabled="!canEdit" clearable />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :xs="12" :sm="4">
+                    <el-form-item label="身高(cm)" prop="height">
+                      <el-input v-model="form.height" placeholder="如 175" :disabled="!canEdit" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :xs="12" :sm="4">
+                    <el-form-item label="体重(kg)" prop="weight">
+                      <el-input v-model="form.weight" placeholder="如 65" :disabled="!canEdit" />
+                    </el-form-item>
+                  </el-col>
 
-              <div class="sub-section-title">
-                <span>学历背景信息</span>
+                  <el-col :xs="12" :sm="8">
+                    <el-form-item label="健康状况" prop="healthCondition">
+                      <el-input v-model="form.healthCondition" placeholder="如 良好 / 无既往病史" :disabled="!canEdit" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :xs="12" :sm="8">
+                    <el-form-item label="婚育情况" prop="maritalStatus">
+                      <el-select v-model="form.maritalStatus" placeholder="请选择" :disabled="!canEdit" class="full-width">
+                        <el-option label="未婚" value="未婚" />
+                        <el-option label="已婚已育" value="已婚已育" />
+                        <el-option label="已婚未育" value="已婚未育" />
+                        <el-option label="其他" value="其他" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :xs="24" :sm="8">
+                    <el-form-item label="身份证号码" prop="idCardNumber">
+                      <el-input v-model="form.idCardNumber" placeholder="请输入18位身份证号" :disabled="!canEdit" maxlength="18" clearable />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </div>
+
+              <!-- 2. 学历与资质 -->
+              <div class="card-section">
+                <div class="card-section-title">
+                  <el-icon><School /></el-icon> 学历与职业资格
+                </div>
+                <el-row :gutter="16">
+                  <el-col :xs="12" :sm="8">
+                    <el-form-item label="最高学历" prop="education">
+                      <el-select v-model="form.education" placeholder="请选择学历" :disabled="!canEdit" class="full-width">
+                        <el-option label="博士研究生" value="博士研究生" />
+                        <el-option label="硕士研究生" value="硕士研究生" />
+                        <el-option label="本科" value="本科" />
+                        <el-option label="大专" value="大专" />
+                        <el-option label="中专/高中及以下" value="高中及以下" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :xs="12" :sm="8">
+                    <el-form-item label="所学专业" prop="major">
+                      <el-input v-model="form.major" placeholder="请输入专业" :disabled="!canEdit" clearable />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :xs="24" :sm="8">
+                    <el-form-item label="毕业院校" prop="graduatedSchool">
+                      <el-input v-model="form.graduatedSchool" placeholder="请输入毕业院校全称" :disabled="!canEdit" clearable />
+                    </el-form-item>
+                  </el-col>
+
+                  <el-col :xs="12" :sm="8">
+                    <el-form-item label="职业资格" prop="vocationalQualification">
+                      <el-input v-model="form.vocationalQualification" placeholder="如 软考高级 / 注册会计师" :disabled="!canEdit" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :xs="12" :sm="8">
+                    <el-form-item label="资格等级" prop="qualificationLevel">
+                      <el-input v-model="form.qualificationLevel" placeholder="如 高级 / 中级" :disabled="!canEdit" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :xs="24" :sm="8">
+                    <el-form-item label="有何技术特长" prop="technicalSpecialty">
+                      <el-input v-model="form.technicalSpecialty" placeholder="专业特长说明" :disabled="!canEdit" />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </div>
+
+              <!-- 3. 联系方式与薪酬账户 -->
+              <div class="card-section">
+                <div class="card-section-title">
+                  <el-icon><Phone /></el-icon> 通讯地址与薪酬账户
+                </div>
+                <el-row :gutter="16">
+                  <el-col :xs="24" :sm="8">
+                    <el-form-item label="联系电话" prop="phone">
+                      <el-input v-model="form.phone" placeholder="11位手机号码" :disabled="!canEdit" maxlength="11" clearable />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :xs="24" :sm="8">
+                    <el-form-item label="电子邮箱" prop="email">
+                      <el-input v-model="form.email" placeholder="个人常用电子邮箱" :disabled="!canEdit" clearable />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :xs="24" :sm="8">
+                    <el-form-item label="暂住 / 现居住地址" prop="currentAddress">
+                      <el-input v-model="form.currentAddress" placeholder="现详细居住地址" :disabled="!canEdit" clearable />
+                    </el-form-item>
+                  </el-col>
+
+                  <el-col :xs="24" :sm="8">
+                    <el-form-item label="房东联系方式" prop="landlordContact">
+                      <el-input v-model="form.landlordContact" placeholder="租房房东姓名及电话(选填)" :disabled="!canEdit" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :xs="24" :sm="8">
+                    <el-form-item label="工资银行卡号" prop="bankCardNumber">
+                      <el-input v-model="form.bankCardNumber" placeholder="用于发放工资的银行卡号" :disabled="!canEdit" clearable />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :xs="24" :sm="8">
+                    <el-form-item label="开户银行全称" prop="bankName">
+                      <el-input v-model="form.bankName" placeholder="如 招商银行深圳高新支行" :disabled="!canEdit" clearable />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </div>
+
+              <!-- 4. 紧急联系人 -->
+              <div class="card-section">
+                <div class="card-section-title">
+                  <el-icon><FirstAidKit /></el-icon> 紧急联系人
+                </div>
+                <el-row :gutter="16">
+                  <el-col :xs="24" :sm="8">
+                    <el-form-item label="紧急联系人姓名" prop="emergencyContact">
+                      <el-input v-model="form.emergencyContact" placeholder="亲属或紧急联系人姓名" :disabled="!canEdit" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :xs="24" :sm="8">
+                    <el-form-item label="紧急联系人电话" prop="emergencyPhone">
+                      <el-input v-model="form.emergencyPhone" placeholder="联系电话" :disabled="!canEdit" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :xs="24" :sm="8">
+                    <el-form-item label="紧急联系人地址" prop="emergencyAddress">
+                      <el-input v-model="form.emergencyAddress" placeholder="联系地址" :disabled="!canEdit" />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </div>
+
+              <!-- 5. 教育学习经历动态列表 -->
+              <div class="card-section">
+                <div class="card-section-header">
+                  <div class="card-section-title"><el-icon><Reading /></el-icon> 教育学习经历</div>
+                  <el-button v-if="canEdit" size="small" type="primary" plain icon="Plus" @click="addEducation">添加经历</el-button>
+                </div>
+                <div v-if="!educationHistory.length" class="empty-hint">暂未添加学习经历</div>
+                <div v-for="(item, idx) in educationHistory" :key="idx" class="dynamic-row-box">
+                  <el-row :gutter="12">
+                    <el-col :xs="24" :sm="6">
+                      <el-input v-model="item.timeRange" placeholder="时间 (如 2018.09-2022.06)" :disabled="!canEdit" />
+                    </el-col>
+                    <el-col :xs="24" :sm="6">
+                      <el-input v-model="item.location" placeholder="学校 / 地点" :disabled="!canEdit" />
+                    </el-col>
+                    <el-col :xs="24" :sm="6">
+                      <el-input v-model="item.content" placeholder="学习专业 / 内容" :disabled="!canEdit" />
+                    </el-col>
+                    <el-col :xs="20" :sm="5">
+                      <el-input v-model="item.result" placeholder="学习结果 (如 毕业/获学士学位)" :disabled="!canEdit" />
+                    </el-col>
+                    <el-col :xs="4" :sm="1" class="delete-btn-col">
+                      <el-button v-if="canEdit" link type="danger" icon="Delete" @click="educationHistory.splice(idx, 1)" />
+                    </el-col>
+                  </el-row>
+                </div>
+              </div>
+
+              <!-- 6. 工作经历动态列表 -->
+              <div class="card-section">
+                <div class="card-section-header">
+                  <div class="card-section-title"><el-icon><Briefcase /></el-icon> 主要工作经历</div>
+                  <el-button v-if="canEdit" size="small" type="primary" plain icon="Plus" @click="addWork">添加经历</el-button>
+                </div>
+                <div v-if="!workHistory.length" class="empty-hint">暂未添加工作经历（应届生可留空）</div>
+                <div v-for="(item, idx) in workHistory" :key="idx" class="dynamic-row-box">
+                  <el-row :gutter="12">
+                    <el-col :xs="24" :sm="5">
+                      <el-input v-model="item.timeRange" placeholder="时间 (如 2022.07-2024.05)" :disabled="!canEdit" />
+                    </el-col>
+                    <el-col :xs="24" :sm="6">
+                      <el-input v-model="item.companyName" placeholder="工作单位名称" :disabled="!canEdit" />
+                    </el-col>
+                    <el-col :xs="12" :sm="4">
+                      <el-input v-model="item.salary" placeholder="工资待遇" :disabled="!canEdit" />
+                    </el-col>
+                    <el-col :xs="12" :sm="4">
+                      <el-input v-model="item.position" placeholder="担任职务" :disabled="!canEdit" />
+                    </el-col>
+                    <el-col :xs="20" :sm="4">
+                      <el-input v-model="item.leaveReason" placeholder="离职原因" :disabled="!canEdit" />
+                    </el-col>
+                    <el-col :xs="4" :sm="1" class="delete-btn-col">
+                      <el-button v-if="canEdit" link type="danger" icon="Delete" @click="workHistory.splice(idx, 1)" />
+                    </el-col>
+                  </el-row>
+                </div>
+              </div>
+
+              <!-- 7. 家庭成员动态列表 -->
+              <div class="card-section">
+                <div class="card-section-header">
+                  <div class="card-section-title"><el-icon><HomeFilled /></el-icon> 家庭成员</div>
+                  <el-button v-if="canEdit" size="small" type="primary" plain icon="Plus" @click="addFamily">添加成员</el-button>
+                </div>
+                <div v-if="!familyMembers.length" class="empty-hint">暂未添加家庭成员信息</div>
+                <div v-for="(item, idx) in familyMembers" :key="idx" class="dynamic-row-box">
+                  <el-row :gutter="12">
+                    <el-col :xs="12" :sm="4">
+                      <el-input v-model="item.name" placeholder="姓名" :disabled="!canEdit" />
+                    </el-col>
+                    <el-col :xs="12" :sm="4">
+                      <el-input v-model="item.relationship" placeholder="与本人关系" :disabled="!canEdit" />
+                    </el-col>
+                    <el-col :xs="12" :sm="3">
+                      <el-input v-model="item.age" placeholder="年龄" :disabled="!canEdit" />
+                    </el-col>
+                    <el-col :xs="24" :sm="7">
+                      <el-input v-model="item.company" placeholder="工作单位" :disabled="!canEdit" />
+                    </el-col>
+                    <el-col :xs="20" :sm="5">
+                      <el-input v-model="item.phone" placeholder="联系电话" :disabled="!canEdit" />
+                    </el-col>
+                    <el-col :xs="4" :sm="1" class="delete-btn-col">
+                      <el-button v-if="canEdit" link type="danger" icon="Delete" @click="familyMembers.splice(idx, 1)" />
+                    </el-col>
+                  </el-row>
+                </div>
               </div>
-              <el-row :gutter="16">
-                <el-col :xs="24" :sm="8">
-                  <el-form-item label="最高学历">
-                    <el-select v-model="form.education" placeholder="请选择学历" :disabled="!canEdit" class="full-width">
-                      <el-option label="大专" value="大专" />
-                      <el-option label="本科" value="本科" />
-                      <el-option label="硕士研究生" value="硕士研究生" />
-                      <el-option label="博士研究生" value="博士研究生" />
-                      <el-option label="中专/高中及以下" value="中专/高中及以下" />
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="8">
-                  <el-form-item label="毕业院校">
-                    <el-input v-model="form.college" placeholder="如：北京大学" :disabled="!canEdit" clearable />
-                  </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="8">
-                  <el-form-item label="所学专业">
-                    <el-input v-model="form.major" placeholder="如：软件工程" :disabled="!canEdit" clearable />
-                  </el-form-item>
-                </el-col>
-              </el-row>
             </el-form>
           </div>
 
-          <!-- 步骤 2: 动态补充信息 -->
-          <div v-show="activeStepKey === 'dynamic'" class="step-content">
+          <!-- 步骤 2: 合同专属增量补充项 (自适应差集) -->
+          <div v-show="currentStep === 1" class="step-content">
             <div class="section-header">
-              <h3 class="section-title">补充岗位信息</h3>
-              <p class="section-desc">请根据公司与岗位要求完善以下必要登记项</p>
+              <h3 class="section-title">合同专属补充信息</h3>
+              <p class="section-desc">以下是本次签署合同中特殊约定的增量字段，登记表未涵盖的项需在此补充确认</p>
             </div>
 
-            <el-form label-position="top">
+            <div v-if="!extraVariables.length" class="all-covered-card">
+              <el-result
+                icon="success"
+                title="个人信息已完整覆盖"
+                sub-title="您在《入职登记表》中填写的姓名、身份证、电话、银行卡等信息已完整满足本次合同签署所需，无需额外补充！"
+              />
+            </div>
+
+            <el-form v-else label-position="top" class="extra-form">
+              <el-alert
+                title="请补充填写以下合同专有信息："
+                type="info"
+                show-icon
+                :closable="false"
+                class="mb-3"
+              />
               <el-row :gutter="16">
-                <el-col
-                  v-for="field in formFields"
-                  :key="field.fieldId"
-                  :xs="24"
-                  :sm="field.dataType === 'textarea' ? 24 : 12"
-                >
-                  <el-form-item
-                    :label="field.fieldName"
-                    :required="field.required"
-                    :error="dynamicErrors[field.fieldId]"
-                  >
-                    <el-date-picker
-                      v-if="field.dataType === 'date'"
-                      v-model="dynamicValues[field.fieldId]"
-                      type="date"
-                      value-format="YYYY-MM-DD"
-                      placeholder="选择日期"
-                      :disabled="!canEdit"
-                      class="full-width"
-                    />
-
-                    <el-input-number
-                      v-else-if="['number', 'decimal', 'int'].includes(field.dataType)"
-                      v-model="dynamicValues[field.fieldId]"
-                      placeholder="请输入数值"
-                      :disabled="!canEdit"
-                      class="full-width"
-                    />
-
-                    <el-select
-                      v-else-if="field.dataType === 'select'"
-                      v-model="dynamicValues[field.fieldId]"
-                      placeholder="请选择"
-                      :disabled="!canEdit"
-                      class="full-width"
-                    >
-                      <el-option
-                        v-for="option in fieldOptions(field)"
-                        :key="option.value"
-                        :label="option.label"
-                        :value="option.value"
-                      />
-                    </el-select>
-
+                <el-col v-for="v in extraVariables" :key="v.variableCode" :xs="24" :sm="12">
+                  <el-form-item :label="v.variableName || v.variableCode" :required="v.required">
                     <el-input
-                      v-else-if="field.dataType === 'textarea'"
-                      v-model="dynamicValues[field.fieldId]"
-                      type="textarea"
-                      :rows="3"
-                      placeholder="请输入相关内容"
-                      :disabled="!canEdit"
-                    />
-
-                    <el-input
-                      v-else
-                      v-model="dynamicValues[field.fieldId]"
-                      placeholder="请输入"
+                      v-model="customVariables[v.variableCode]"
+                      :placeholder="v.defaultValue || `请输入${v.variableName}`"
                       :disabled="!canEdit"
                     />
                   </el-form-item>
@@ -310,902 +371,651 @@
             </el-form>
           </div>
 
-          <!-- 步骤 3: 证件与材料上传 -->
-          <div v-show="activeStepKey === 'materials'" class="step-content">
+          <!-- 步骤 3: 证件材料上传 -->
+          <div v-show="currentStep === 2" class="step-content">
             <div class="section-header">
-              <h3 class="section-title">证件与入职材料上传</h3>
-              <p class="section-desc">支持清晰拍照或扫描件（JPG/PNG/PDF），确保证件四角完整、文字清晰可见</p>
+              <h3 class="section-title">证件与材料上传</h3>
+              <p class="section-desc">请上传清晰真实有效的证件扫描件或照片（支持 PNG、JPG、PDF）</p>
             </div>
 
-            <div class="material-grid">
+            <el-empty v-if="!materialRequirements.length" description="本次入职无需上传附加证件材料" />
+
+            <div v-else class="materials-grid">
               <div
-                v-for="item in materialRequirements"
-                :key="item.materialTypeId"
-                class="material-card"
-                :class="{
-                  'has-uploaded': getUploadedMaterial(item.materialTypeId),
-                  'is-rejected': isMaterialRejected(item.materialTypeId)
-                }"
+                v-for="mat in materialRequirements"
+                :key="mat.materialTypeId"
+                class="material-item-card"
               >
-                <div class="material-header">
-                  <div class="material-title-box">
-                    <span class="material-name">{{ item.materialName }}</span>
-                    <el-tag v-if="item.required" size="small" type="danger" effect="plain">必传</el-tag>
+                <div class="mat-card-header">
+                  <div class="mat-title-box">
+                    <span class="mat-name">{{ mat.materialName }}</span>
+                    <el-tag v-if="mat.required" size="small" type="danger" effect="plain">必传</el-tag>
                     <el-tag v-else size="small" type="info" effect="plain">选传</el-tag>
                   </div>
-                  <div class="material-status">
-                    <el-tag
-                      v-if="isMaterialRejected(item.materialTypeId)"
-                      type="danger"
-                      size="small"
-                    >
-                      需重新上传
-                    </el-tag>
-                    <el-tag
-                      v-else-if="getUploadedMaterial(item.materialTypeId)"
-                      type="success"
-                      size="small"
-                    >
-                      已上传
-                    </el-tag>
-                    <span v-else class="text-secondary">未上传</span>
-                  </div>
+                  <span class="mat-limit">最多 {{ mat.maxFileCount }} 份，格式：{{ mat.allowedExtensions }}</span>
                 </div>
 
-                <!-- 驳回批注 -->
-                <div v-if="getMaterialRejectRemark(item.materialTypeId)" class="reject-remark">
-                  <el-icon><WarningFilled /></el-icon>
-                  <span>退回原因：{{ getMaterialRejectRemark(item.materialTypeId) }}</span>
-                </div>
-
-                <!-- 资料预览/上传区 -->
-                <div class="material-body">
-                  <!-- 已上传文件预览 -->
-                  <div v-if="getUploadedMaterial(item.materialTypeId)" class="preview-box">
-                    <el-image
-                      class="preview-image"
-                      :src="fileDownloadUrl(getUploadedMaterial(item.materialTypeId)!.fileId)"
-                      :preview-src-list="[fileDownloadUrl(getUploadedMaterial(item.materialTypeId)!.fileId)]"
-                      fit="cover"
-                      preview-teleported
-                    >
-                      <template #error>
-                        <div class="file-placeholder">
-                          <el-icon :size="28"><Document /></el-icon>
-                          <span>已上传文档</span>
-                        </div>
-                      </template>
-                    </el-image>
-
-                    <div v-if="canEdit" class="preview-actions">
-                      <el-upload
-                        :action="uploadUrl(item.materialTypeId)"
-                        :show-file-list="false"
-                        :on-success="onUploadSuccess"
-                        :on-error="onUploadError"
-                        :accept="item.allowedExtensions ? formatAccept(item.allowedExtensions) : 'image/*,.pdf'"
-                      >
-                        <el-button size="small" type="primary" plain>重新上传</el-button>
-                      </el-upload>
-                    </div>
-                  </div>
-
-                  <!-- 未上传时的上传触发区 -->
-                  <div v-else class="upload-trigger-box">
-                    <el-upload
+                <div class="uploaded-files-list">
+                  <div
+                    v-for="f in getUploadedMaterials(mat.materialTypeId)"
+                    :key="f.id"
+                    class="file-badge"
+                  >
+                    <el-icon><Document /></el-icon>
+                    <span class="file-name">{{ f.fileName || f.materialName }}</span>
+                    <el-button
                       v-if="canEdit"
-                      class="custom-uploader"
-                      :action="uploadUrl(item.materialTypeId)"
-                      :show-file-list="false"
-                      :on-success="onUploadSuccess"
-                      :on-error="onUploadError"
-                      :accept="item.allowedExtensions ? formatAccept(item.allowedExtensions) : 'image/*,.pdf'"
-                      drag
-                    >
-                      <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
-                      <div class="el-upload__text">
-                        点击或拖拽文件到此处上传
-                      </div>
-                      <div class="el-upload__tip">
-                        支持 {{ item.allowedExtensions || 'JPG / PNG / PDF' }} 格式
-                      </div>
-                    </el-upload>
-                    <div v-else class="empty-readonly-text">未上传此材料</div>
+                      link
+                      type="danger"
+                      icon="Close"
+                      @click="deleteFile(f.id)"
+                    />
                   </div>
                 </div>
+
+                <div v-if="canEdit && getUploadedMaterials(mat.materialTypeId).length < mat.maxFileCount" class="upload-action-box">
+                  <el-upload
+                    :action="getMaterialUploadUrl(mat.materialTypeId)"
+                    :show-file-list="false"
+                    :on-success="onUploadSuccess"
+                    :before-upload="(file: File) => beforeUpload(file, mat)"
+                  >
+                    <el-button size="small" type="primary" plain icon="Upload">
+                      上传文件 / 照片
+                    </el-button>
+                  </el-upload>
+                </div>
               </div>
             </div>
           </div>
 
-          <!-- 步骤 4: 合同查阅与签署确认 -->
-          <div v-show="activeStepKey === 'contracts'" class="step-content">
+          <!-- 步骤 4: 合同查阅与签署 -->
+          <div v-show="currentStep === 3" class="step-content">
             <div class="section-header">
               <h3 class="section-title">入职合同查阅与确认</h3>
-              <p class="section-desc">请认真阅读下列待签署合同及协议全文，确认无误后勾选确认</p>
+              <p class="section-desc">系统已为您代入真实登记信息生成专属合同，请认真查阅条款并勾选确认</p>
             </div>
 
-            <el-empty v-if="!contracts.length" description="暂无需要确认的合同" />
+            <el-empty v-if="!contracts.length" description="暂无待签署入职合同" />
 
-            <div v-else class="contract-list">
+            <div v-else class="contracts-list">
               <div
-                v-for="item in contracts"
-                :key="item.id"
-                class="contract-card"
-                :class="{ 'is-confirmed': confirmed[item.id] }"
+                v-for="c in contracts"
+                :key="c.id"
+                class="contract-sign-card"
               >
-                <div class="contract-header">
-                  <div class="contract-info">
-                    <h4 class="contract-name">{{ item.contractName }}</h4>
-                    <span class="contract-type-badge">{{ item.contractType || '劳动合同' }}</span>
+                <div class="contract-card-top">
+                  <div class="contract-meta">
+                    <span class="contract-title font-bold">{{ c.contractName }}</span>
+                    <el-tag size="small" :type="c.contractStatus === 'confirmed' ? 'success' : 'warning'">
+                      {{ c.contractStatus === 'confirmed' ? '已阅并同意' : '待查阅确认' }}
+                    </el-tag>
+                  </div>
+                  <div class="contract-desc">
+                    请点击下方按钮下载/查阅带您专属信息的合同全文。
                   </div>
-                  <el-tag :type="confirmed[item.id] ? 'success' : 'warning'" effect="plain">
-                    {{ confirmed[item.id] ? '已确认' : '待查阅确认' }}
-                  </el-tag>
                 </div>
 
-                <div class="contract-body">
-                  <p class="contract-tip">
-                    本合同已由人事为您生成专属版本，请点击下方按钮查阅完整条款。
-                  </p>
-                  <div class="contract-action-bar">
-                    <el-button type="primary" plain icon="Download" @click="viewContract(item.id)">
-                      下载 / 查阅合同原文
-                    </el-button>
+                <div class="contract-card-bottom">
+                  <el-button
+                    type="primary"
+                    plain
+                    icon="Download"
+                    @click="previewAndDownloadContract(c)"
+                  >
+                    下载 / 查阅合同原文
+                  </el-button>
 
-                    <el-checkbox
-                      v-model="confirmed[item.id]"
-                      :disabled="!canEdit || confirmed[item.id]"
-                      size="large"
-                      class="confirm-checkbox"
-                      @change="checked => confirm(item.id, checked)"
-                    >
-                      我已完整阅读并同意《{{ item.contractName }}》
-                    </el-checkbox>
-                  </div>
+                  <el-checkbox
+                    v-if="canEdit"
+                    v-model="c.isAgreed"
+                    :label="`我已完整阅读并同意《${c.contractName}》全部条款`"
+                  />
+                  <span v-else class="confirmed-text">✓ 候选人已确认同意</span>
                 </div>
               </div>
             </div>
           </div>
 
-          <!-- 底部吸底操作栏 -->
-          <footer class="wizard-footer">
-            <div class="footer-inner">
-              <el-button v-if="currentStepIndex > 0" @click="prevStep">
-                上一步
-              </el-button>
-
-              <div class="footer-right">
-                <el-button v-if="canEdit" plain @click="saveDraft">
-                  暂存草稿
-                </el-button>
-
-                <el-button
-                  v-if="currentStepIndex < totalSteps - 1"
-                  type="primary"
-                  @click="nextStep"
-                >
-                  下一步
-                </el-button>
-
-                <el-button
-                  v-else-if="canEdit"
-                  type="success"
-                  icon="Check"
-                  :loading="submitting"
-                  @click="submitAll"
-                >
-                  提交入职审核
-                </el-button>
-
-                <el-button v-if="!canEdit && showEditView" @click="showEditView = false">
-                  返回进度看板
-                </el-button>
-              </div>
-            </div>
-          </footer>
+          <!-- 底部向导操作栏 -->
+          <div class="wizard-footer">
+            <el-button v-if="currentStep > 0" @click="currentStep--">上一步</el-button>
+            <el-button
+              v-if="currentStep < 3"
+              type="primary"
+              @click="nextStep"
+            >
+              下一步
+            </el-button>
+            <el-button
+              v-if="currentStep === 3 && canEdit"
+              type="success"
+              icon="Check"
+              :loading="submitting"
+              @click="submitAll"
+            >
+              确认无误并提交入职资料
+            </el-button>
+          </div>
         </div>
       </template>
     </div>
   </main>
 </template>
 
-<script setup lang="ts" name="onboardingFill">
-import { ref, reactive, computed, onMounted } from "vue";
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from "vue";
 import { useRoute } from "vue-router";
-import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
+import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
 import {
-  Promotion,
-  User,
-  Document,
-  FolderChecked,
-  Tickets,
-  UploadFilled,
-  WarningFilled,
-  Check,
-  Download
-} from "@element-plus/icons-vue";
-import { onboardingPublicApi } from "@/api/modules/biz/onboarding-public";
+  OnboardingTask,
+  onboardingPublicApi
+} from "@/api/modules/biz/onboarding";
 
 const route = useRoute();
-const token = String(route.query.token || "");
+const token = ref((route.query.token as string) || "");
 
 const loading = ref(false);
 const submitting = ref(false);
 const error = ref("");
-const showEditView = ref(false);
+const currentStep = ref(0);
 
-const task = ref<any>();
+const task = ref<OnboardingTask | null>(null);
 const contracts = ref<any[]>([]);
-const formFields = ref<any[]>([]);
 const materialRequirements = ref<any[]>([]);
 const uploadedMaterials = ref<any[]>([]);
+const contractVariables = ref<any[]>([]);
 
-const confirmed = reactive<Record<number, boolean>>({});
-const dynamicValues = reactive<Record<number, any>>({});
-const dynamicErrors = reactive<Record<number, string>>({});
+const regFormRef = ref<FormInstance>();
 
-const baseFormRef = ref<FormInstance>();
-const form = reactive({
+// 1. 入职登记表主表单
+const form = reactive<any>({
   employeeName: "",
+  gender: "男",
+  nation: "汉族",
+  birthday: "",
+  registeredResidence: "",
+  height: "",
+  weight: "",
+  healthCondition: "良好",
+  maritalStatus: "未婚",
+  education: "本科",
+  major: "",
+  graduatedSchool: "",
+  vocationalQualification: "",
+  qualificationLevel: "",
+  technicalSpecialty: "",
   phone: "",
+  email: "",
   idCardNumber: "",
-  gender: "",
-  nation: "",
-  contactAddress: "",
+  currentAddress: "",
+  landlordContact: "",
   bankCardNumber: "",
   bankName: "",
   bankAccountName: "",
-  college: "",
-  education: "",
-  major: ""
+  emergencyContact: "",
+  emergencyPhone: "",
+  emergencyAddress: "",
+  onboardingDepartment: "",
+  onboardingDate: "",
+  onboardingPosition: "",
+  otherRemarks: ""
 });
 
-const baseRules: FormRules = {
+// 多条动态经历
+const educationHistory = ref<{ timeRange: string; location: string; content: string; result: string }[]>([]);
+const workHistory = ref<{ timeRange: string; companyName: string; salary: string; position: string; leaveReason: string }[]>([]);
+const familyMembers = ref<{ name: string; relationship: string; age: string; company: string; phone: string }[]>([]);
+
+// 2. 特殊合同增量变量 (差集)
+const customVariables = reactive<Record<string, string>>({});
+
+// 表单验证规则
+const regRules: FormRules = {
   employeeName: [{ required: true, message: "请输入真实姓名", trigger: "blur" }],
-  phone: [
-    { required: true, message: "请输入手机号码", trigger: "blur" },
-    { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的11位手机号码", trigger: "blur" }
-  ],
-  idCardNumber: [
-    { required: true, message: "请输入身份证号码", trigger: "blur" },
-    {
-      pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
-      message: "请输入正确的18位居民身份证号码",
-      trigger: "blur"
-    }
-  ]
+  gender: [{ required: true, message: "请选择性别", trigger: "change" }],
+  phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
+  idCardNumber: [{ required: true, message: "请输入身份证号码", trigger: "blur" }],
+  bankCardNumber: [{ required: true, message: "请输入工资银行卡号", trigger: "blur" }],
+  bankName: [{ required: true, message: "请输入开户银行名称", trigger: "blur" }]
 };
 
-// 步骤配置与计算
-const stepKeys = computed(() => {
-  const keys = ["base"];
-  if (formFields.value.length) keys.push("dynamic");
-  keys.push("materials", "contracts");
-  return keys;
+const canEdit = computed(() => {
+  return task.value?.taskStatus === "pending_fill" || task.value?.taskStatus === "rejected";
 });
 
-const currentStepIndex = ref(0);
-const totalSteps = computed(() => stepKeys.value.length);
-const activeStepKey = computed(() => stepKeys.value[currentStepIndex.value]);
-const currentStep = computed(() => currentStepIndex.value);
+// 计算差集增量变量 (合同需要的 employee. 变量中，登记表没有的字段)
+const registrationStandardFields = [
+  "employeename", "name", "username", "gender", "nation", "birthday", "registeredresidence",
+  "height", "weight", "healthcondition", "maritalstatus", "education", "major", "graduatedschool",
+  "college", "vocationalqualification", "qualificationlevel", "technicalspecialty", "phone",
+  "mobile", "email", "idcardnumber", "idcard", "currentaddress", "contactaddress", "landlordcontact",
+  "bankcardnumber", "bankcard", "bankname", "bankaccountname", "emergencycontact", "emergencyphone",
+  "emergencyaddress", "onboardingdepartment", "onboardingdate", "onboardingposition", "otherremarks"
+];
 
-const canEdit = computed(() =>
-  ["pending_fill", "rejected"].includes(task.value?.taskStatus)
-);
-
-type EpTagType = "success" | "warning" | "info" | "primary" | "danger";
-
-const statusTagType = (status: string): EpTagType => {
-  const map: Record<string, EpTagType> = {
-    pending_fill: "primary",
-    reviewing: "warning",
-    rejected: "danger",
-    approved: "success",
-    archived: "info"
-  };
-  return map[status] || "info";
-};
-
-const statusText = (status: string) => {
-  const map: Record<string, string> = {
-    pending_fill: "待填写",
-    reviewing: "审核中",
-    rejected: "已退回修改",
-    approved: "审核已通过",
-    archived: "已归档"
-  };
-  return map[status] || status;
-};
-
-const formatDateTime = (dateStr?: string) => {
-  if (!dateStr) return "-";
-  return dateStr.replace("T", " ").substring(0, 16);
-};
-
-const formatAccept = (exts: string) => {
-  return exts
-    .split(",")
-    .map(e => `.${e.trim().replace(/^\./, "")}`)
-    .join(",");
-};
-
-const fileDownloadUrl = (fileId: number) => {
-  return `/api/sys/dev/file/download?id=${fileId}`;
-};
-
-const getUploadedMaterial = (materialTypeId: number) => {
-  return uploadedMaterials.value.find(item => item.materialTypeId === materialTypeId);
-};
-
-const isMaterialRejected = (materialTypeId: number) => {
-  const mat = getUploadedMaterial(materialTypeId);
-  return mat?.reviewStatus === "need_supplement";
-};
-
-const getMaterialRejectRemark = (materialTypeId: number) => {
-  const mat = getUploadedMaterial(materialTypeId);
-  return mat?.reviewStatus === "need_supplement" ? mat.reviewRemark : "";
-};
-
-const fieldOptions = (field: any) => {
-  try {
-    const options = JSON.parse(field.optionsJson || "[]");
-    return Array.isArray(options)
-      ? options.map(option =>
-          typeof option === "object"
-            ? { label: String(option.label ?? option.value), value: String(option.value ?? option.label) }
-            : { label: String(option), value: String(option) }
-        )
-      : [];
-  } catch {
-    return [];
+const extraVariables = computed(() => {
+  const result: any[] = [];
+  const visited = new Set<string>();
+  for (const v of contractVariables.value) {
+    if (v.variableType === "employee") {
+      const fieldCode = (v.variableCode.split(".")[1] || v.variableCode).toLowerCase();
+      if (!registrationStandardFields.includes(fieldCode) && !visited.has(v.variableCode)) {
+        visited.add(v.variableCode);
+        result.push(v);
+      }
+    }
   }
-};
+  return result;
+});
+
+function addEducation() {
+  educationHistory.value.push({ timeRange: "", location: "", content: "", result: "" });
+}
+function addWork() {
+  workHistory.value.push({ timeRange: "", companyName: "", salary: "", position: "", leaveReason: "" });
+}
+function addFamily() {
+  familyMembers.value.push({ name: "", relationship: "", age: "", company: "", phone: "" });
+}
+
+function getUploadedMaterials(matId: number) {
+  return uploadedMaterials.value.filter(item => item.materialTypeId === matId);
+}
+
+function statusTagType(status?: string) {
+  switch (status) {
+    case "pending_fill": return "warning";
+    case "reviewing": return "primary";
+    case "approved":
+    case "archived": return "success";
+    case "rejected":
+    case "revoked": return "danger";
+    default: return "info";
+  }
+}
+
+function statusText(status?: string) {
+  switch (status) {
+    case "pending_fill": return "待填写";
+    case "reviewing": return "审核中";
+    case "approved": return "已通过";
+    case "archived": return "已归档";
+    case "rejected": return "已退回";
+    case "revoked": return "已撤销";
+    default: return status || "未知";
+  }
+}
+
+function formatDateTime(str?: string) {
+  return str ? str.replace("T", " ").substring(0, 16) : "";
+}
 
 async function load() {
-  if (!token) {
-    error.value = "缺少有效入职凭证，请联系人事获取正确链接";
+  if (!token.value) {
+    error.value = "缺少入职访问 Token";
     return;
   }
-
   loading.value = true;
   error.value = "";
-
   try {
-    const { data }: any = await onboardingPublicApi.detail(token);
+    const res = await onboardingPublicApi.detail({ token: token.value });
+    const data = res.data;
     task.value = data.task;
-    contracts.value = data.contracts || [];
-    formFields.value = data.formFields || [];
+    contracts.value = (data.contracts || []).map((c: any) => ({
+      ...c,
+      isAgreed: c.contractStatus === "confirmed"
+    }));
     materialRequirements.value = data.materialRequirements || [];
     uploadedMaterials.value = data.materials || [];
+    contractVariables.value = data.contractVariables || [];
 
+    // 回填入职登记表
     if (data.employeeInfo) {
       Object.assign(form, data.employeeInfo);
+      if (data.employeeInfo.educationHistoryJson) {
+        try { educationHistory.value = JSON.parse(data.employeeInfo.educationHistoryJson); } catch {}
+      }
+      if (data.employeeInfo.workHistoryJson) {
+        try { workHistory.value = JSON.parse(data.employeeInfo.workHistoryJson); } catch {}
+      }
+      if (data.employeeInfo.familyMembersJson) {
+        try { familyMembers.value = JSON.parse(data.employeeInfo.familyMembersJson); } catch {}
+      }
+      if (data.employeeInfo.customVariablesJson) {
+        try { Object.assign(customVariables, JSON.parse(data.employeeInfo.customVariablesJson)); } catch {}
+      }
     }
-
-    Object.keys(dynamicValues).forEach(key => delete dynamicValues[Number(key)]);
-    (data.dynamicValues || []).forEach((item: any) => {
-      dynamicValues[item.fieldId] = item.fieldValue || "";
-    });
-
-    contracts.value.forEach(item => {
-      confirmed[item.id] = !!item.confirmedAt;
-    });
-  } catch (reason: any) {
-    error.value = reason?.message || "入职链接已失效或无法访问";
+  } catch (err: any) {
+    error.value = err.message || "无法加载入职任务";
   } finally {
     loading.value = false;
   }
 }
 
-// 步骤切换与校验
+async function saveCurrentEmployeeInfo() {
+  form.bankAccountName = form.employeeName; // 开户名自动对齐姓名
+  const payload = {
+    ...form,
+    token: token.value,
+    educationHistoryJson: JSON.stringify(educationHistory.value),
+    workHistoryJson: JSON.stringify(workHistory.value),
+    familyMembersJson: JSON.stringify(familyMembers.value),
+    customVariablesJson: JSON.stringify(customVariables)
+  };
+  await onboardingPublicApi.saveEmployeeInfo(payload);
+}
+
 async function nextStep() {
-  const currentKey = activeStepKey.value;
-
-  if (currentKey === "base") {
-    if (!baseFormRef.value) return;
-    const valid = await baseFormRef.value.validate().catch(() => false);
-    if (!valid) {
-      ElMessage.warning("请完整填写基本信息必填项");
-      return;
+  if (currentStep.value === 0) {
+    await regFormRef.value?.validate();
+    if (canEdit.value) {
+      await saveCurrentEmployeeInfo();
+      ElMessage.success("入职登记表已临时保存");
     }
-  } else if (currentKey === "dynamic") {
-    let hasError = false;
-    Object.keys(dynamicErrors).forEach(k => delete dynamicErrors[Number(k)]);
-    for (const field of formFields.value) {
-      if (field.required && !dynamicValues[field.fieldId]) {
-        dynamicErrors[field.fieldId] = `请填写${field.fieldName}`;
-        hasError = true;
-      }
+  } else if (currentStep.value === 1) {
+    if (canEdit.value) {
+      await saveCurrentEmployeeInfo();
     }
-    if (hasError) {
-      ElMessage.warning("请填写所有岗位必填信息");
-      return;
-    }
-  } else if (currentKey === "materials") {
-    const missing = materialRequirements.value.filter(
-      item => item.required && !getUploadedMaterial(item.materialTypeId)
-    );
-    if (missing.length > 0) {
-      ElMessage.warning(`请先上传必传材料：${missing.map(m => m.materialName).join("、")}`);
-      return;
+  } else if (currentStep.value === 2) {
+    const missing = materialRequirements.value.filter(m => m.required && !getUploadedMaterials(m.materialTypeId).length);
+    if (missing.length) {
+      return ElMessage.warning(`请先上传必传材料：${missing.map((m: any) => m.materialName).join("、")}`);
     }
   }
-
-  if (currentStepIndex.value < totalSteps.value - 1) {
-    currentStepIndex.value++;
-    window.scrollTo({ top: 0, behavior: "smooth" });
-  }
+  currentStep.value++;
 }
 
-function prevStep() {
-  if (currentStepIndex.value > 0) {
-    currentStepIndex.value--;
-    window.scrollTo({ top: 0, behavior: "smooth" });
-  }
+function getMaterialUploadUrl(materialTypeId: number) {
+  return `/api/open/onboarding/upload-material?token=${encodeURIComponent(token.value)}&materialTypeId=${materialTypeId}`;
 }
 
-async function saveDraft() {
-  try {
-    await onboardingPublicApi.saveEmployeeInfo({ ...form, token });
-    await onboardingPublicApi.saveDynamicValues({
-      token,
-      values: formFields.value.map(field => ({
-        fieldId: field.fieldId,
-        fieldValue: String(dynamicValues[field.fieldId] ?? "")
-      }))
-    });
-    ElMessage.success("草稿保存成功");
-  } catch (err: any) {
-    ElMessage.error(err?.message || "草稿保存失败");
+function beforeUpload(file: File, mat: any) {
+  const ext = file.name.split(".").pop()?.toLowerCase() || "";
+  const allowed = (mat.allowedExtensions || "").toLowerCase().split(",")
+    .map((s: string) => s.trim())
+    .filter(Boolean);
+  if (allowed.length && !allowed.includes(ext)) {
+    ElMessage.error(`仅支持格式：${mat.allowedExtensions}`);
+    return false;
   }
+  return true;
 }
 
-async function confirm(taskContractId: number, checked: boolean | string | number) {
-  if (checked !== true) {
-    confirmed[taskContractId] = true;
-    return;
+async function onUploadSuccess(res: any) {
+  if (res.code !== 200 && res.code !== 0) {
+    return ElMessage.error(res.msg || "上传失败");
   }
-  try {
-    await onboardingPublicApi.confirmContract({ token, taskContractId });
-    confirmed[taskContractId] = true;
-    ElMessage.success("已确认阅读并同意该合同条款");
-  } catch (err: any) {
-    ElMessage.error(err?.message || "合同确认失败");
+  ElMessage.success("材料上传成功");
+  await load();
+}
+
+async function deleteFile(id: number) {
+  await ElMessageBox.confirm("确认删除已上传材料？", "删除确认", { type: "warning" });
+  await onboardingPublicApi.deleteMaterial({ token: token.value, taskMaterialId: id });
+  ElMessage.success("材料已删除");
+  await load();
+}
+
+async function previewAndDownloadContract(c: any) {
+  if (canEdit.value) {
+    await saveCurrentEmployeeInfo();
   }
+  const url = onboardingPublicApi.contractSourceUrl({
+    token: token.value,
+    taskContractId: c.id
+  });
+  window.open(url, "_blank");
 }
 
 async function submitAll() {
-  // 校验合同确认
-  const unconfirmed = contracts.value.filter(c => !confirmed[c.id]);
-  if (unconfirmed.length > 0) {
-    ElMessage.warning(`请先阅读并确认所有合同条款：${unconfirmed.map(c => c.contractName).join("、")}`);
-    return;
+  const unconfirmed = contracts.value.filter(c => !c.isAgreed);
+  if (unconfirmed.length) {
+    return ElMessage.warning(`请先勾选同意全部合同（未勾选：${unconfirmed.map(c => c.contractName).join("、")}）`);
   }
 
-  await ElMessageBox.confirm(
-    "提交后入职信息将进入人事复核阶段，确认提交吗？",
-    "提交入职确认",
-    { confirmButtonText: "确认提交", cancelButtonText: "再检查一下", type: "info" }
-  );
+  await ElMessageBox.confirm("确认提交全部入职资料与合同确认？提交后将进入人事复核建档流程。", "最终提交确认", {
+    type: "success",
+    confirmButtonText: "确认提交",
+    cancelButtonText: "再检查一下"
+  });
 
   submitting.value = true;
   try {
-    await saveDraft();
-    await onboardingPublicApi.submit(token);
-    ElMessage.success("入职资料已成功提交，人事将尽快为您审核！");
+    await saveCurrentEmployeeInfo();
+    for (const c of contracts.value) {
+      await onboardingPublicApi.confirmContract({ token: token.value, taskContractId: c.id });
+    }
+    await onboardingPublicApi.submit({ token: token.value });
+    ElMessage.success("入职资料已成功提交！请等待人事审核。");
     await load();
-    showEditView.value = false;
-  } catch (err: any) {
-    ElMessage.error(err?.message || "提交失败，请重试");
   } finally {
     submitting.value = false;
   }
 }
 
-function uploadUrl(materialTypeId: number) {
-  return `/api/open/onboarding/upload-material?token=${encodeURIComponent(token)}&materialTypeId=${materialTypeId}`;
-}
-
-function onUploadSuccess(response: any) {
-  if (response?.code !== 200) {
-    ElMessage.error(response?.msg || "材料上传失败，请重试");
-    return;
-  }
-
-  ElMessage.success("材料上传成功");
-  load();
-}
-
-function onUploadError(error: Error) {
-  ElMessage.error(error?.message || "材料上传失败，请重试");
-}
-
-function viewContract(taskContractId: number) {
-  window.open(
-    `/api/open/onboarding/contract-source?token=${encodeURIComponent(token)}&taskContractId=${taskContractId}`,
-    "_blank"
-  );
-}
-
 onMounted(load);
 </script>
 
 <style scoped>
 .fill-page {
   min-height: 100vh;
-  background: #f0f4f9;
-  padding-bottom: 80px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  background: #f8fafc;
+  padding-bottom: 40px;
 }
-
-/* 顶部品牌背景 */
 .brand-header {
-  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
+  background: linear-gradient(135deg, #1e40af, #3b82f6);
   color: #fff;
-  padding: 36px 20px 60px;
+  padding: 36px 20px;
   text-align: center;
 }
-
-.brand-content {
-  max-width: 760px;
-  margin: 0 auto;
-}
-
 .brand-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  background: rgba(255, 255, 255, 0.18);
-  backdrop-filter: blur(8px);
-  padding: 4px 14px;
+  background: rgba(255, 255, 255, 0.2);
+  padding: 4px 12px;
   border-radius: 20px;
   font-size: 13px;
   margin-bottom: 12px;
 }
-
 .brand-title {
+  margin: 0 0 8px 0;
   font-size: 26px;
   font-weight: 700;
-  margin: 0 0 8px;
 }
-
 .brand-subtitle {
+  margin: 0;
   font-size: 14px;
   opacity: 0.9;
-  margin: 0;
 }
-
-/* 主容器 */
 .main-container {
-  max-width: 760px;
-  margin: -36px auto 0;
+  max-width: 1000px;
+  margin: -24px auto 0;
   padding: 0 16px;
 }
-
-/* 状态条 */
 .status-banner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: #fff;
-  border-radius: 12px;
-  padding: 14px 20px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  padding: 12px 18px;
+  border-radius: 8px;
   margin-bottom: 16px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
 }
-
-.status-info {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
 .task-no {
-  font-size: 14px;
-  font-weight: 600;
-  color: #334155;
+  font-weight: bold;
+  margin-right: 10px;
 }
-
 .expire-time {
-  font-size: 12px;
+  font-size: 13px;
   color: #64748b;
 }
-
-.alert-box {
-  margin-bottom: 16px;
-  border-radius: 8px;
-}
-
-/* 状态看板 */
-.status-card {
-  background: #fff;
-  border-radius: 16px;
-  padding: 24px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
-}
-
-.timeline-box {
-  padding: 12px 10px 0;
-}
-
-.timeline-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: #1e293b;
-  margin-bottom: 24px;
-}
-
-.view-toggle-action {
-  text-align: center;
-  margin-top: 24px;
-  padding-top: 16px;
-  border-top: 1px solid #f1f5f9;
-}
-
-/* 向导卡片 */
 .wizard-card {
   background: #fff;
-  border-radius: 16px;
+  border-radius: 10px;
   padding: 24px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
 }
-
-.readonly-banner {
-  margin-bottom: 20px;
-}
-
 .steps-wrapper {
-  padding: 10px 0 24px;
-  margin-bottom: 20px;
-  border-bottom: 1px solid #f1f5f9;
+  margin-bottom: 30px;
+  padding: 0 20px;
 }
-
-.step-content {
-  min-height: 280px;
+.registration-header {
+  text-align: center;
+  border-bottom: 2px solid #e2e8f0;
+  padding-bottom: 16px;
+  margin-bottom: 24px;
 }
-
-.section-header {
-  margin-bottom: 20px;
-}
-
-.section-title {
-  font-size: 18px;
-  font-weight: 600;
+.reg-title {
+  letter-spacing: 4px;
+  font-size: 22px;
   color: #1e293b;
-  margin: 0 0 6px;
+  margin: 0 0 6px 0;
 }
-
-.section-desc {
+.reg-subtitle {
   font-size: 13px;
   color: #64748b;
   margin: 0;
 }
-
-.sub-section-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: #334155;
-  border-left: 3px solid #2563eb;
-  padding-left: 8px;
-  margin: 18px 0 12px;
+.card-section {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px 20px;
+  margin-bottom: 18px;
+}
+.card-section-title {
+  font-weight: 700;
+  font-size: 15px;
+  color: #0f172a;
+  margin-bottom: 14px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.card-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.dynamic-row-box {
+  background: #fff;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  padding: 10px 12px;
+  margin-bottom: 10px;
+}
+.delete-btn-col {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.empty-hint {
+  font-size: 13px;
+  color: #94a3b8;
+  padding: 8px 0;
 }
-
 .full-width {
   width: 100%;
 }
-
-/* 证件材料网格 */
-.material-grid {
+.section-header {
+  margin-bottom: 20px;
+}
+.section-title {
+  margin: 0 0 6px 0;
+  font-size: 18px;
+}
+.section-desc {
+  margin: 0;
+  font-size: 13px;
+  color: #64748b;
+}
+.all-covered-card {
+  padding: 40px 0;
+}
+.materials-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 16px;
 }
-
-.material-card {
+.material-item-card {
   border: 1px solid #e2e8f0;
-  border-radius: 12px;
+  border-radius: 8px;
   padding: 16px;
   background: #f8fafc;
-  transition: all 0.2s ease;
 }
-
-.material-card.has-uploaded {
-  background: #fff;
-  border-color: #cbd5e1;
-}
-
-.material-card.is-rejected {
-  border-color: #f87171;
-  background: #fef2f2;
-}
-
-.material-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.mat-card-header {
   margin-bottom: 12px;
 }
-
-.material-title-box {
+.mat-title-box {
   display: flex;
   align-items: center;
   gap: 8px;
+  margin-bottom: 4px;
 }
-
-.material-name {
-  font-weight: 600;
-  font-size: 14px;
-  color: #1e293b;
+.mat-name {
+  font-weight: 700;
 }
-
-.reject-remark {
+.mat-limit {
+  font-size: 12px;
+  color: #64748b;
+}
+.file-badge {
   display: flex;
   align-items: center;
   gap: 6px;
-  background: #fee2e2;
-  color: #b91c1c;
-  font-size: 12px;
+  background: #fff;
+  border: 1px solid #cbd5e1;
   padding: 6px 10px;
-  border-radius: 6px;
-  margin-bottom: 12px;
-}
-
-.preview-box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-}
-
-.preview-image {
-  width: 100%;
-  height: 140px;
-  border-radius: 8px;
-  border: 1px solid #e2e8f0;
-}
-
-.file-placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 140px;
-  background: #f1f5f9;
-  color: #64748b;
-  gap: 8px;
-  font-size: 13px;
-}
-
-.custom-uploader :deep(.el-upload-dragger) {
-  padding: 20px 10px;
-  border-radius: 8px;
-  border: 1px dashed #cbd5e1;
-  background: #fff;
-}
-
-.custom-uploader :deep(.el-upload-dragger:hover) {
-  border-color: #3b82f6;
-}
-
-.empty-readonly-text {
-  text-align: center;
-  color: #94a3b8;
-  padding: 30px 0;
-  font-size: 13px;
-}
-
-/* 合同列表 */
-.contract-list {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.contract-card {
-  border: 1px solid #e2e8f0;
-  border-radius: 12px;
-  padding: 18px;
-  background: #fff;
-  transition: all 0.2s ease;
-}
-
-.contract-card.is-confirmed {
-  border-color: #86efac;
-  background: #f0fdf4;
-}
-
-.contract-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.contract-info {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.contract-name {
-  margin: 0;
-  font-size: 15px;
-  font-weight: 600;
-  color: #1e293b;
-}
-
-.contract-type-badge {
-  font-size: 12px;
-  background: #f1f5f9;
-  color: #475569;
-  padding: 2px 8px;
   border-radius: 4px;
+  font-size: 13px;
+  margin-bottom: 8px;
 }
-
-.contract-tip {
+.file-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.contract-sign-card {
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 18px;
+  background: #f8fafc;
+  margin-bottom: 16px;
+}
+.contract-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+.contract-title {
+  font-size: 16px;
+}
+.contract-desc {
   font-size: 13px;
   color: #64748b;
-  margin: 0 0 16px;
+  margin-bottom: 14px;
 }
-
-.contract-action-bar {
+.contract-card-bottom {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
   flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
   gap: 12px;
+  border-top: 1px dashed #cbd5e1;
   padding-top: 12px;
-  border-top: 1px dashed #e2e8f0;
 }
-
-/* 底部吸底栏 */
 .wizard-footer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: #fff;
-  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
-  padding: 12px 20px;
-  z-index: 100;
-}
-
-.footer-inner {
-  max-width: 760px;
-  margin: 0 auto;
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 30px;
+  border-top: 1px solid #e2e8f0;
+  padding-top: 20px;
 }
-
-.footer-right {
-  display: flex;
-  gap: 10px;
-}
-
-@media (max-width: 600px) {
-  .brand-header {
-    padding: 24px 16px 48px;
-  }
-  .brand-title {
-    font-size: 22px;
-  }
-  .main-container {
-    padding: 0 10px;
-  }
-  .wizard-card, .status-card {
-    padding: 16px;
-    border-radius: 12px;
-  }
-  .status-banner {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-  }
-  .contract-action-bar {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
-</style>
\ No newline at end of file
+</style>