From c6509a3545e63bf47d7d61daf00ace4ea460cb7b Mon Sep 17 00:00:00 2001
From: fuenmao <980740792@qq.com>
Date: Mon, 24 Aug 2026 16:36:28 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E7=AC=AC=E4=B8=80=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |    3 +
 src/api/modules/biz/onboarding-public.ts      |   34 +
 src/api/modules/biz/onboarding.ts             |  521 +++++++
 src/auto-import.d.ts                          |    2 +-
 src/routers/modules/staticRouter.ts           |    6 +
 src/views/biz/onboarding/contract/index.vue   |  975 ++++++++++++++
 src/views/biz/onboarding/employee/index.vue   |  371 +++++
 .../biz/onboarding/entry-config/index.vue     |  652 +++++++++
 src/views/biz/onboarding/setup/index.vue      |  525 ++++++++
 src/views/biz/onboarding/task/index.vue       | 1199 +++++++++++++++++
 src/views/onboarding/fill/index.vue           | 1126 ++++++++++++++++
 11 files changed, 5413 insertions(+), 1 deletion(-)
 create mode 100644 src/api/modules/biz/onboarding-public.ts
 create mode 100644 src/api/modules/biz/onboarding.ts
 create mode 100644 src/views/biz/onboarding/contract/index.vue
 create mode 100644 src/views/biz/onboarding/employee/index.vue
 create mode 100644 src/views/biz/onboarding/entry-config/index.vue
 create mode 100644 src/views/biz/onboarding/setup/index.vue
 create mode 100644 src/views/biz/onboarding/task/index.vue
 create mode 100644 src/views/onboarding/fill/index.vue

diff --git a/components.d.ts b/components.d.ts
index 7484766..0fa6c69 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -60,6 +60,7 @@ declare module 'vue' {
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElResult: typeof import('element-plus/es')['ElResult']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
@@ -74,6 +75,8 @@ declare module 'vue' {
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
diff --git a/src/api/modules/biz/onboarding-public.ts b/src/api/modules/biz/onboarding-public.ts
new file mode 100644
index 0000000..9aca31d
--- /dev/null
+++ b/src/api/modules/biz/onboarding-public.ts
@@ -0,0 +1,34 @@
+import { moduleRequest } from "@/api/request";
+
+const http = moduleRequest("/open/onboarding/");
+
+export const onboardingPublicApi = {
+  detail(token: string) {
+    return http.post("detail", { token });
+  },
+
+  saveEmployeeInfo(params: Record<string, unknown>) {
+    return http.post("save-employee-info", params);
+  },
+
+  saveDynamicValues(params: {
+    token: string;
+    values: Array<{
+      fieldId: number;
+      fieldValue: string;
+    }>;
+  }) {
+    return http.post("save-dynamic-values", params);
+  },
+
+  confirmContract(params: {
+    token: string;
+    taskContractId: number;
+  }) {
+    return http.post("confirm-contract", params);
+  },
+
+  submit(token: string) {
+    return http.post("submit", { token });
+  }
+};
\ No newline at end of file
diff --git a/src/api/modules/biz/onboarding.ts b/src/api/modules/biz/onboarding.ts
new file mode 100644
index 0000000..c19e93f
--- /dev/null
+++ b/src/api/modules/biz/onboarding.ts
@@ -0,0 +1,521 @@
+import { moduleRequest } from "@/api/request";
+import type { ReqId, ResPage } from "@/api/interface";
+
+const taskHttp = moduleRequest("/biz/onboarding/task/");
+const auditHttp = moduleRequest("/biz/onboarding/audit/");
+
+export interface OnboardingTask {
+  id: number;
+  taskNo: string;
+  companyId: number;
+  positionId: number;
+  taskStatus: string;
+  linkExpireAt?: string;
+  submitCount: number;
+  createTime: string;
+}
+
+export interface OnboardingCompanyOption {
+  id: number;
+  companyName: string;
+}
+
+export interface OnboardingPositionOption {
+  id: number;
+  positionName: string;
+}
+
+export interface OnboardingCompany extends OnboardingCompanyOption {
+  companyCode: string;
+  legalName: string;
+  unifiedSocialCreditCode?: string;
+  legalRepresentative?: string;
+  registeredAddress?: string;
+  contactPhone?: string;
+  remark?: string;
+  status: string;
+}
+
+export interface OnboardingPosition extends OnboardingPositionOption {
+  companyId: number;
+  positionCode: string;
+  defaultContractYears?: number;
+  defaultProbationMonths?: number;
+  remark?: string;
+  status: string;
+}
+
+export interface OnboardingContractTemplate {
+  id: number;
+  templateCode: string;
+  templateName: string;
+  contractType: string;
+  description?: string;
+  status: string;
+}
+
+export interface OnboardingContractVersion {
+  id: number;
+  templateId: number;
+  versionNo: string;
+  sourceDocxFileId: number;
+  effectiveDate?: string;
+  expiryDate?: string;
+  versionStatus: string;
+  remark?: string;
+}
+
+export interface OnboardingTemplateVariable {
+  id: number;
+  templateVersionId: number;
+  variableCode: string;
+  variableName: string;
+  variableType: string;
+  dataType: string;
+  employeeField?: string;
+  defaultValue?: string;
+  required: boolean;
+  hrEditable: boolean;
+  sortCode?: number;
+  remark?: string;
+}
+
+export interface OnboardingContractScope {
+  id: number;
+  companyId: number;
+  positionId?: number;
+  templateId: number;
+  templateVersionId: number;
+  required: boolean;
+  sortCode?: number;
+}
+
+export interface OnboardingTaskContractVariableItem {
+  id: number;
+  variableCode: string;
+  variableName: string;
+  variableType: string;
+  dataType: string;
+  variableValue?: string;
+  required: boolean;
+  hrEditable: boolean;
+  editable: boolean;
+}
+
+export interface OnboardingTaskContractVariableGroup {
+  taskContractId: number;
+  contractName: string;
+  contractType: string;
+  variables: OnboardingTaskContractVariableItem[];
+}
+
+export interface OnboardingEmployee {
+  id: number;
+  employeeNo?: string;
+  employeeName: string;
+  companyId: number;
+  positionId: number;
+  phone: string;
+  idCardNumber: string;
+  entryDate?: string;
+  createTime: string;
+}
+
+export interface OnboardingFormField {
+  id: number;
+  fieldCode: string;
+  fieldName: string;
+  dataType: string;
+  optionsJson?: string;
+  validationRule?: string;
+  placeholder?: string;
+  status: string;
+}
+
+export interface OnboardingMaterialType {
+  id: number;
+  materialCode: string;
+  materialName: string;
+  allowedExtensions?: string;
+  maxFileCount: number;
+  maxFileSizeMb?: number;
+  status: string;
+}
+
+export interface OnboardingFormRequirement {
+  id: number;
+  companyId: number;
+  positionId?: number;
+  fieldId: number;
+  required: boolean;
+  sortCode?: number;
+}
+
+export interface OnboardingMaterialRequirement {
+  id: number;
+  companyId: number;
+  positionId?: number;
+  materialTypeId: number;
+  required: boolean;
+  sortCode?: number;
+}
+
+export const onboardingTaskApi = {
+  page(params: Record<string, unknown>) {
+    return taskHttp.get<ResPage<OnboardingTask>>("page", params);
+  },
+
+  detail(params: ReqId) {
+    return taskHttp.get("detail", params);
+  },
+
+  create(params: Record<string, unknown>) {
+    return taskHttp.post("create", params);
+  },
+
+  approve(params: {
+    taskId: number;
+    auditOpinion?: string;
+  }) {
+    return auditHttp.post("approve", params);
+  },
+
+  reject(params: {
+    taskId: number;
+    auditOpinion: string;
+  }) {
+    return auditHttp.post("reject", params);
+  },
+
+  generateContract(taskContractId: number) {
+    return moduleRequest("/biz/onboarding/contract-document/").post(
+      "generate",
+      { taskContractId }
+    );
+  },
+
+  archive(params: {
+    taskId: number;
+    auditOpinion?: string;
+  }) {
+    return taskHttp.post("archive", params);
+  },
+
+  revoke(params: {
+    taskId: number;
+    auditOpinion?: string;
+  }) {
+    return taskHttp.post("revoke", params);
+  },
+
+  reviewMaterial(params: {
+    taskMaterialId: number;
+    reviewStatus: string;
+    reviewRemark?: string;
+  }) {
+    return moduleRequest("/biz/onboarding/material/").post(
+      "review",
+      params
+    );
+  },
+
+  listCompanies() {
+    return moduleRequest("/biz/onboarding/company/").get<
+      OnboardingCompanyOption[]
+    >("list-enabled");
+  },
+
+  listPositions(companyId: number) {
+    return moduleRequest("/biz/onboarding/position/").get<
+      OnboardingPositionOption[]
+    >("list-enabled", { companyId });
+  },
+
+  companyPage(params: Record<string, unknown>) {
+    return moduleRequest("/biz/onboarding/company/").get<
+      ResPage<OnboardingCompany>
+    >("page", params);
+  },
+
+  companyDetail(params: ReqId) {
+    return moduleRequest("/biz/onboarding/company/").get<OnboardingCompany>(
+      "detail",
+      params
+    );
+  },
+
+  saveCompany(
+    params: Partial<OnboardingCompany>,
+    edit = false
+  ) {
+    return moduleRequest("/biz/onboarding/company/").post(
+      edit ? "edit" : "add",
+      params
+    );
+  },
+
+  deleteCompany(ids: number[]) {
+    return moduleRequest("/biz/onboarding/company/").post(
+      "delete",
+      { ids }
+    );
+  },
+
+  positionPage(params: Record<string, unknown>) {
+    return moduleRequest("/biz/onboarding/position/").get<
+      ResPage<OnboardingPosition>
+    >("page", params);
+  },
+
+  positionDetail(params: ReqId) {
+    return moduleRequest("/biz/onboarding/position/").get<OnboardingPosition>(
+      "detail",
+      params
+    );
+  },
+
+  savePosition(
+    params: Partial<OnboardingPosition>,
+    edit = false
+  ) {
+    return moduleRequest("/biz/onboarding/position/").post(
+      edit ? "edit" : "add",
+      params
+    );
+  },
+
+  deletePosition(ids: number[]) {
+    return moduleRequest("/biz/onboarding/position/").post(
+      "delete",
+      { ids }
+    );
+  },
+
+  templatePage(params: Record<string, unknown>) {
+    return moduleRequest("/biz/onboarding/contract-template/").get<
+      ResPage<OnboardingContractTemplate>
+    >("page", params);
+  },
+
+  templateDetail(params: ReqId) {
+    return moduleRequest("/biz/onboarding/contract-template/").get<
+      OnboardingContractTemplate
+    >("detail", params);
+  },
+
+  saveTemplate(
+    params: Partial<OnboardingContractTemplate>,
+    edit = false
+  ) {
+    return moduleRequest("/biz/onboarding/contract-template/").post(
+      edit ? "edit" : "add",
+      params
+    );
+  },
+
+  deleteTemplate(ids: number[]) {
+    return moduleRequest("/biz/onboarding/contract-template/").post(
+      "delete",
+      { ids }
+    );
+  },
+
+  versionPage(params: {
+    templateId: number;
+    pageNum: number;
+    pageSize: number;
+  }) {
+    return moduleRequest("/biz/onboarding/contract-template/").get<
+      ResPage<OnboardingContractVersion>
+    >("version/page", params);
+  },
+
+  addVersion(params: Partial<OnboardingContractVersion>) {
+    return moduleRequest("/biz/onboarding/contract-template/").post(
+      "version/add",
+      params
+    );
+  },
+
+  setVersionStatus(params: {
+    id: number;
+    versionStatus: string;
+  }) {
+    return moduleRequest("/biz/onboarding/contract-template/").post(
+      "version/set-status",
+      params
+    );
+  },
+
+  variablePage(params: {
+    templateVersionId: number;
+    pageNum: number;
+    pageSize: number;
+  }) {
+    return moduleRequest("/biz/onboarding/contract-template/").get<
+      ResPage<OnboardingTemplateVariable>
+    >("variable/page", params);
+  },
+
+  saveVariable(
+    params: Partial<OnboardingTemplateVariable>,
+    edit = false
+  ) {
+    return moduleRequest("/biz/onboarding/contract-template/").post(
+      edit ? "variable/edit" : "variable/add",
+      params
+    );
+  },
+
+  deleteVariable(ids: number[]) {
+    return moduleRequest("/biz/onboarding/contract-template/").post(
+      "variable/delete",
+      { ids }
+    );
+  },
+
+  scopePage(params: {
+    templateId: number;
+    pageNum: number;
+    pageSize: number;
+  }) {
+    return moduleRequest("/biz/onboarding/contract-template/").get<
+      ResPage<OnboardingContractScope>
+    >("scope/page", params);
+  },
+
+  addScope(params: Partial<OnboardingContractScope>) {
+    return moduleRequest("/biz/onboarding/contract-template/").post(
+      "scope/add",
+      params
+    );
+  },
+
+  deleteScope(ids: number[]) {
+    return moduleRequest("/biz/onboarding/contract-template/").post(
+      "scope/delete",
+      { ids }
+    );
+  },
+
+  uploadDocx(params: FormData) {
+    return moduleRequest("/sys/dev/file/").post<number>(
+      "uploadLocal",
+      params
+    );
+  },
+
+  taskContractVariables(taskId: number) {
+    return moduleRequest("/biz/onboarding/task-contract-variable/").get<
+      OnboardingTaskContractVariableGroup[]
+    >("list", { taskId });
+  },
+
+  saveTaskContractVariables(params: {
+    taskContractId: number;
+    values: Array<{
+      id: number;
+      variableValue?: string;
+    }>;
+  }) {
+    return moduleRequest("/biz/onboarding/task-contract-variable/").post(
+      "save",
+      params
+    );
+  },
+
+  employeePage(params: Record<string, unknown>) {
+    return moduleRequest("/biz/onboarding/employee/").get<
+      ResPage<OnboardingEmployee>
+    >("page", params);
+  },
+
+  employeeDetail(params: ReqId) {
+    return moduleRequest("/biz/onboarding/employee/").get(
+      "detail",
+      params
+    );
+  },
+
+  listFormFields() {
+    return moduleRequest("/biz/onboarding/entry-config/").get<
+      OnboardingFormField[]
+    >("form-field/list");
+  },
+
+  saveFormField(params: Partial<OnboardingFormField>) {
+    return moduleRequest("/biz/onboarding/entry-config/").post(
+      "form-field/save",
+      params
+    );
+  },
+
+  deleteFormFields(ids: number[]) {
+    return moduleRequest("/biz/onboarding/entry-config/").post(
+      "form-field/delete",
+      { ids }
+    );
+  },
+
+  listMaterialTypes() {
+    return moduleRequest("/biz/onboarding/entry-config/").get<
+      OnboardingMaterialType[]
+    >("material-type/list");
+  },
+
+  saveMaterialType(params: Partial<OnboardingMaterialType>) {
+    return moduleRequest("/biz/onboarding/entry-config/").post(
+      "material-type/save",
+      params
+    );
+  },
+
+  deleteMaterialTypes(ids: number[]) {
+    return moduleRequest("/biz/onboarding/entry-config/").post(
+      "material-type/delete",
+      { ids }
+    );
+  },
+
+  listFormRequirements(companyId: number) {
+    return moduleRequest("/biz/onboarding/entry-config/").get<
+      OnboardingFormRequirement[]
+    >("form-requirement/list", { companyId });
+  },
+
+  saveFormRequirement(params: Partial<OnboardingFormRequirement>) {
+    return moduleRequest("/biz/onboarding/entry-config/").post(
+      "form-requirement/save",
+      params
+    );
+  },
+
+  deleteFormRequirements(ids: number[]) {
+    return moduleRequest("/biz/onboarding/entry-config/").post(
+      "form-requirement/delete",
+      { ids }
+    );
+  },
+
+  listMaterialRequirements(companyId: number) {
+    return moduleRequest("/biz/onboarding/entry-config/").get<
+      OnboardingMaterialRequirement[]
+    >("material-requirement/list", { companyId });
+  },
+
+  saveMaterialRequirement(
+    params: Partial<OnboardingMaterialRequirement>
+  ) {
+    return moduleRequest("/biz/onboarding/entry-config/").post(
+      "material-requirement/save",
+      params
+    );
+  },
+
+  deleteMaterialRequirements(ids: number[]) {
+    return moduleRequest("/biz/onboarding/entry-config/").post(
+      "material-requirement/delete",
+      { ids }
+    );
+  }
+};
\ No newline at end of file
diff --git a/src/auto-import.d.ts b/src/auto-import.d.ts
index b298153..54a0d8c 100644
--- a/src/auto-import.d.ts
+++ b/src/auto-import.d.ts
@@ -8,7 +8,7 @@ export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
-  const ElMessageBox: (typeof import("element-plus/es"))["ElMessageBox"]
+  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
   const customRef: typeof import('vue')['customRef']
diff --git a/src/routers/modules/staticRouter.ts b/src/routers/modules/staticRouter.ts
index 15b8bff..4e8cc00 100644
--- a/src/routers/modules/staticRouter.ts
+++ b/src/routers/modules/staticRouter.ts
@@ -31,6 +31,12 @@ export const staticRouter: RouteRecordRaw[] = [
       title: "登录"
     }
   },
+  {
+    path: "/onboarding/fill",
+    name: "onboardingFill",
+    component: () => import("@/views/onboarding/fill/index.vue"),
+    meta: { title: "入职资料填写" }
+  },
   {
     path: "/layout",
     name: "layout",
diff --git a/src/views/biz/onboarding/contract/index.vue b/src/views/biz/onboarding/contract/index.vue
new file mode 100644
index 0000000..95610ba
--- /dev/null
+++ b/src/views/biz/onboarding/contract/index.vue
@@ -0,0 +1,975 @@
+<template>
+  <div class="table-box">
+    <ProTable
+      ref="templateTable"
+      title="合同模板列表"
+      :columns="templateColumns"
+      :request-api="onboardingTaskApi.templatePage"
+    >
+      <template #tableHeader>
+        <el-button type="primary" icon="Plus" @click="openTemplateCreate">
+          新增合同模板
+        </el-button>
+      </template>
+
+      <template #contractType="scope">
+        <el-tag effect="plain" type="primary">
+          {{ scope.row.contractType }}
+        </el-tag>
+      </template>
+
+      <template #status="scope">
+        <el-tag size="small" :type="scope.row.status === 'enable' ? 'success' : 'info'">
+          {{ scope.row.status === "enable" ? "启用" : "停用" }}
+        </el-tag>
+      </template>
+
+      <template #operation="scope">
+        <el-button link type="primary" icon="Files" @click="openManagementDrawer(scope.row)">
+          版本与配置
+        </el-button>
+
+        <el-button link type="primary" icon="Edit" @click="openTemplateEdit(scope.row)">
+          编辑
+        </el-button>
+
+        <el-button link type="danger" icon="Delete" @click="removeTemplate(scope.row)">
+          删除
+        </el-button>
+      </template>
+    </ProTable>
+
+    <!-- 新增 / 编辑合同模板基础信息弹窗 -->
+    <el-dialog
+      v-model="templateVisible"
+      :title="templateEditing ? '编辑合同模板' : '新增合同模板'"
+      width="580px"
+      destroy-on-close
+      append-to-body
+    >
+      <el-form :model="templateForm" label-width="110px">
+        <el-form-item label="模板编码" required>
+          <el-input v-model="templateForm.templateCode" placeholder="如：LABOR_CONTRACT" />
+        </el-form-item>
+
+        <el-form-item label="模板名称" required>
+          <el-input v-model="templateForm.templateName" placeholder="如：标准全职劳动合同" />
+        </el-form-item>
+
+        <el-form-item label="合同类型" required>
+          <el-input v-model="templateForm.contractType" placeholder="如：劳动合同、保密协议、竞业协议" />
+        </el-form-item>
+
+        <el-form-item label="状态" required>
+          <el-select v-model="templateForm.status" class="w-full">
+            <el-option label="启用" value="enable" />
+            <el-option label="停用" value="disable" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="模板说明">
+          <el-input v-model="templateForm.description" type="textarea" :rows="3" placeholder="合同模板适用说明或签署注意事项" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="templateVisible = false">取消</el-button>
+        <el-button type="primary" @click="saveTemplate">保存</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 一站式合同版本与配置大抽屉 -->
+    <el-drawer
+      v-model="drawerVisible"
+      :title="`合同模板管理 · ${selectedTemplate?.templateName || ''}`"
+      size="960px"
+      destroy-on-close
+    >
+      <div v-if="selectedTemplate" class="drawer-content-box">
+        <!-- 头部简要卡片 -->
+        <div class="template-header-card">
+          <div class="header-left">
+            <div class="template-title-row">
+              <span class="template-title">{{ selectedTemplate.templateName }}</span>
+              <el-tag type="primary">{{ selectedTemplate.contractType }}</el-tag>
+              <el-tag :type="selectedTemplate.status === 'enable' ? 'success' : 'info'">
+                {{ selectedTemplate.status === 'enable' ? '启用中' : '已停用' }}
+              </el-tag>
+            </div>
+            <div class="template-meta-row">
+              <span>模板编码：<code>{{ selectedTemplate.templateCode }}</code></span>
+              <span v-if="selectedTemplate.description">说明：{{ selectedTemplate.description }}</span>
+            </div>
+          </div>
+        </div>
+
+        <el-tabs v-model="drawerActiveTab" class="management-tabs">
+          <!-- 1. 版本与 DOCX 模板管理 -->
+          <el-tab-pane label="版本与DOCX模板" name="versions">
+            <div class="tab-pane-content">
+              <div class="pane-action-bar">
+                <el-button type="primary" icon="Upload" @click="openVersionCreate">
+                  上传新版本 DOCX
+                </el-button>
+                <span class="pane-tip-text">
+                  支持多版本迭代。启用某个版本后，该版本的 DOCX 将用于生成新入职员工的合同。
+                </span>
+              </div>
+
+              <el-table :data="versions" border stripe class="mt-3">
+                <el-table-column prop="versionNo" label="版本号" width="130" align="center">
+                  <template #default="scope">
+                    <span class="font-bold">{{ scope.row.versionNo }}</span>
+                  </template>
+                </el-table-column>
+
+                <el-table-column prop="versionStatus" label="状态" width="100" align="center">
+                  <template #default="scope">
+                    <el-tag size="small" :type="versionType(scope.row.versionStatus)">
+                      {{ versionText(scope.row.versionStatus) }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+
+                <el-table-column prop="effectiveDate" label="生效日期" width="130" align="center" />
+                <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">
+                  <template #default="scope">
+                    <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
+                      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>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </el-tab-pane>
+
+          <!-- 2. 适用范围配置 -->
+          <el-tab-pane label="适用范围 (公司与岗位)" name="scopes">
+            <div class="tab-pane-content">
+              <el-card shadow="never" class="scope-add-card">
+                <template #header>
+                  <span class="font-bold">为公司/岗位分配此合同模板</span>
+                </template>
+                <el-form :model="scopeForm" inline class="scope-inline-form">
+                  <el-form-item label="所属公司" required>
+                    <el-select
+                      v-model="scopeForm.companyId"
+                      placeholder="请选择公司"
+                      filterable
+                      style="width: 200px"
+                      @change="onScopeCompanyChange"
+                    >
+                      <el-option
+                        v-for="company in companies"
+                        :key="company.id"
+                        :label="company.companyName"
+                        :value="company.id"
+                      />
+                    </el-select>
+                  </el-form-item>
+
+                  <el-form-item label="适用岗位">
+                    <el-select
+                      v-model="scopeForm.positionId"
+                      placeholder="全公司所有岗位"
+                      clearable
+                      style="width: 200px"
+                    >
+                      <el-option
+                        v-for="position in scopePositions"
+                        :key="position.id"
+                        :label="position.positionName"
+                        :value="position.id"
+                      />
+                    </el-select>
+                  </el-form-item>
+
+                  <el-form-item label="绑定版本" required>
+                    <el-select
+                      v-model="scopeForm.templateVersionId"
+                      placeholder="请选择合同版本"
+                      style="width: 180px"
+                    >
+                      <el-option
+                        v-for="ver in enabledVersions"
+                        :key="ver.id"
+                        :label="`版本 ${ver.versionNo}`"
+                        :value="ver.id"
+                      />
+                    </el-select>
+                  </el-form-item>
+
+                  <el-form-item>
+                    <el-button type="primary" icon="Plus" @click="saveScope">
+                      添加适用范围
+                    </el-button>
+                  </el-form-item>
+                </el-form>
+              </el-card>
+
+              <el-table :data="scopes" border stripe class="mt-4">
+                <el-table-column label="所属公司" min-width="180">
+                  <template #default="scope">
+                    <el-tag effect="plain" type="primary">
+                      {{ companyName(scope.row.companyId) }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+
+                <el-table-column label="适用岗位" min-width="180">
+                  <template #default="scope">
+                    {{ positionName(scope.row.positionId) }}
+                  </template>
+                </el-table-column>
+
+                <el-table-column label="生效版本" width="140" align="center">
+                  <template #default="scope">
+                    <el-tag size="small" type="success">
+                      版本 {{ versionName(scope.row.templateVersionId) }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+
+                <el-table-column label="操作" width="110" align="center">
+                  <template #default="scope">
+                    <el-button link type="danger" icon="Delete" @click="removeScope(scope.row)">
+                      移除
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+
+      <template #footer>
+        <el-button @click="drawerVisible = false">关闭</el-button>
+      </template>
+    </el-drawer>
+
+    <!-- 上传合同 DOCX 版本弹窗 -->
+    <el-dialog
+      v-model="versionVisible"
+      title="上传新版本 DOCX"
+      width="600px"
+      destroy-on-close
+      append-to-body
+    >
+      <el-alert
+        title="仅支持 .docx 文件。请在 Word 文档中使用 {{变量编码}}（如 {{EmployeeName}}、{{Salary}}）作为占位符。"
+        type="info"
+        :closable="false"
+        style="margin-bottom: 16px"
+      />
+
+      <el-form :model="versionForm" label-width="120px">
+        <el-form-item label="版本编号" required>
+          <el-input v-model="versionForm.versionNo" placeholder="如：v2026.01" />
+        </el-form-item>
+
+        <el-form-item label="DOCX源文件" required>
+          <el-upload
+            :http-request="uploadDocx"
+            :before-upload="beforeDocxUpload"
+            :show-file-list="false"
+            accept=".docx"
+          >
+            <el-button type="primary" plain icon="Upload">
+              {{ versionForm.sourceDocxFileId ? '重新选择DOCX文件' : '选择并上传DOCX' }}
+            </el-button>
+          </el-upload>
+
+          <div v-if="versionForm.sourceDocxFileId" class="file-uploaded-tag">
+            <el-icon color="#10b981"><Check /></el-icon>
+            <span>文件上传成功（ID: {{ versionForm.sourceDocxFileId }}）</span>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="生效日期">
+          <el-date-picker v-model="versionForm.effectiveDate" value-format="YYYY-MM-DD" class="w-full" />
+        </el-form-item>
+
+        <el-form-item label="失效日期">
+          <el-date-picker v-model="versionForm.expiryDate" value-format="YYYY-MM-DD" class="w-full" />
+        </el-form-item>
+
+        <el-form-item label="版本备注">
+          <el-input v-model="versionForm.remark" type="textarea" :rows="2" placeholder="本次版本修订说明" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="versionVisible = false">取消</el-button>
+        <el-button type="primary" @click="saveVersion">保存版本</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 变量配置弹窗 -->
+    <el-dialog
+      v-model="variablesVisible"
+      :title="`合同变量配置 · 版本 ${selectedVersion?.versionNo || ''}`"
+      width="1050px"
+      destroy-on-close
+      append-to-body
+    >
+      <div class="toolbar-flex">
+        <el-button type="primary" icon="Plus" @click="openVariableCreate">
+          新增变量定义
+        </el-button>
+        <el-alert
+          title="在 DOCX 模板中使用 {{变量编码}} 作为占位符。点击变量编码旁复制按钮可直接复制占位符。"
+          type="info"
+          show-icon
+          :closable="false"
+          style="flex: 1; margin: 0 0 0 16px;"
+        />
+      </div>
+
+      <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)"
+              >
+                复制
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+
+        <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>
+
+            <el-button link type="danger" icon="Delete" @click="removeVariable(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+    <!-- 新增 / 编辑单个变量 -->
+    <el-dialog
+      v-model="variableVisible"
+      :title="variableEditing ? '编辑变量' : '新增变量'"
+      width="640px"
+      destroy-on-close
+      append-to-body
+    >
+      <el-form :model="variableForm" label-width="130px">
+        <el-form-item label="变量编码" required>
+          <el-input v-model="variableForm.variableCode" placeholder="如：EMPLOYEE_NAME" />
+        </el-form-item>
+
+        <el-form-item label="变量名称" required>
+          <el-input v-model="variableForm.variableName" placeholder="如：员工姓名" />
+        </el-form-item>
+
+        <el-form-item label="变量类型" required>
+          <el-select v-model="variableForm.variableType" class="w-full">
+            <el-option label="员工填写（从新员工基本信息/动态字段读取）" value="employee" />
+            <el-option label="公司信息（从公司档案自动读取）" value="company" />
+            <el-option label="合同/人事填写（人事发起时录入）" value="contract" />
+            <el-option label="系统生成（签署日期等）" value="system" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="数据类型" required>
+          <el-select v-model="variableForm.dataType" class="w-full">
+            <el-option label="文本" value="string" />
+            <el-option label="日期" value="date" />
+            <el-option label="数字" value="number" />
+            <el-option label="金额" value="decimal" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item v-if="variableForm.variableType === 'employee'" label="员工字段">
+          <el-input v-model="variableForm.employeeField" placeholder="如：EmployeeName、IdCardNumber、Phone" />
+        </el-form-item>
+
+        <el-form-item label="默认值">
+          <el-input v-model="variableForm.defaultValue" placeholder="未填写时的备选默认值" />
+        </el-form-item>
+
+        <el-form-item label="排序">
+          <el-input-number v-model="variableForm.sortCode" :min="0" />
+        </el-form-item>
+
+        <el-form-item label="必填">
+          <el-switch v-model="variableForm.required" />
+        </el-form-item>
+
+        <el-form-item label="人事可修改">
+          <el-switch v-model="variableForm.hrEditable" />
+        </el-form-item>
+
+        <el-form-item label="备注">
+          <el-input v-model="variableForm.remark" type="textarea" :rows="2" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="variableVisible = false">取消</el-button>
+        <el-button type="primary" @click="saveVariable">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts" name="onboardingContract">
+import { ref, reactive, computed, onMounted } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Plus, Edit, Delete, Files, Upload, Setting, Download, Check, CopyDocument } from "@element-plus/icons-vue";
+import {
+  onboardingTaskApi,
+  type OnboardingCompanyOption,
+  type OnboardingContractScope,
+  type OnboardingContractTemplate,
+  type OnboardingContractVersion,
+  type OnboardingPositionOption,
+  type OnboardingTemplateVariable
+} from "@/api/modules/biz/onboarding";
+import type { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
+
+const templateTable = ref<ProTableInstance>();
+
+const companies = ref<OnboardingCompanyOption[]>([]);
+const scopePositions = ref<OnboardingPositionOption[]>([]);
+
+const selectedTemplate = ref<OnboardingContractTemplate>();
+const selectedVersion = ref<OnboardingContractVersion>();
+
+const drawerVisible = ref(false);
+const drawerActiveTab = ref("versions");
+
+const templateVisible = ref(false);
+const templateEditing = ref(false);
+
+const versions = ref<OnboardingContractVersion[]>([]);
+const versionVisible = ref(false);
+
+const variablesVisible = ref(false);
+const variableEditing = ref(false);
+const variables = ref<OnboardingTemplateVariable[]>([]);
+const variableVisible = ref(false);
+
+const scopes = ref<OnboardingContractScope[]>([]);
+
+const emptyTemplate = (): Partial<OnboardingContractTemplate> => ({
+  templateCode: "",
+  templateName: "",
+  contractType: "",
+  status: "enable",
+  description: ""
+});
+
+const emptyVersion = (): Partial<OnboardingContractVersion> => ({
+  versionNo: "",
+  sourceDocxFileId: undefined,
+  effectiveDate: undefined,
+  expiryDate: undefined,
+  remark: ""
+});
+
+const emptyVariable = (): Partial<OnboardingTemplateVariable> => ({
+  variableCode: "",
+  variableName: "",
+  variableType: "employee",
+  dataType: "string",
+  employeeField: "",
+  defaultValue: "",
+  sortCode: 10,
+  required: true,
+  hrEditable: true,
+  remark: ""
+});
+
+const emptyScope = (): Partial<OnboardingContractScope> => ({
+  companyId: undefined,
+  positionId: undefined,
+  templateVersionId: undefined
+});
+
+const templateForm = reactive<Partial<OnboardingContractTemplate>>(emptyTemplate());
+const versionForm = reactive<Partial<OnboardingContractVersion>>(emptyVersion());
+const variableForm = reactive<Partial<OnboardingTemplateVariable>>(emptyVariable());
+const scopeForm = reactive<Partial<OnboardingContractScope>>(emptyScope());
+
+const enabledVersions = computed(() =>
+  versions.value.filter(item => item.versionStatus === "enabled")
+);
+
+const templateColumns: ColumnProps<OnboardingContractTemplate>[] = [
+  {
+    prop: "templateCode",
+    label: "模板编码",
+    minWidth: 160,
+    search: { el: "input" }
+  },
+  {
+    prop: "templateName",
+    label: "模板名称",
+    minWidth: 200,
+    search: { el: "input" }
+  },
+  {
+    prop: "contractType",
+    label: "合同类型",
+    width: 140,
+    search: { el: "input" }
+  },
+  {
+    prop: "status",
+    label: "状态",
+    width: 100,
+    align: "center",
+    enum: [
+      { label: "启用", value: "enable" },
+      { label: "停用", value: "disable" }
+    ],
+    search: { el: "select" }
+  },
+  {
+    prop: "description",
+    label: "模板说明",
+    minWidth: 200
+  },
+  {
+    prop: "operation",
+    label: "操作",
+    fixed: "right",
+    width: 260
+  }
+];
+
+function formatTime(timeStr?: string) {
+  if (!timeStr) return "-";
+  return timeStr.replace("T", " ").substring(0, 19);
+}
+
+function resetTemplate() {
+  Object.assign(templateForm, emptyTemplate());
+}
+
+function resetVersion() {
+  Object.assign(versionForm, emptyVersion());
+}
+
+function resetVariable() {
+  Object.assign(variableForm, emptyVariable());
+}
+
+function resetScope() {
+  Object.assign(scopeForm, emptyScope());
+}
+
+async function loadCompanies() {
+  const { data } = await onboardingTaskApi.listCompanies();
+  companies.value = data;
+}
+
+async function loadVersions() {
+  if (!selectedTemplate.value) return;
+  const { data } = await onboardingTaskApi.versionPage({
+    templateId: selectedTemplate.value.id,
+    pageNum: 1,
+    pageSize: 100
+  });
+  versions.value = data.list;
+}
+
+async function loadVariables() {
+  if (!selectedVersion.value) return;
+  const { data } = await onboardingTaskApi.variablePage({
+    templateVersionId: selectedVersion.value.id,
+    pageNum: 1,
+    pageSize: 100
+  });
+  variables.value = data.list;
+}
+
+async function loadScopes() {
+  if (!selectedTemplate.value) return;
+  const { data } = await onboardingTaskApi.scopePage({
+    templateId: selectedTemplate.value.id,
+    pageNum: 1,
+    pageSize: 100
+  });
+  scopes.value = data.list;
+}
+
+async function openManagementDrawer(row: OnboardingContractTemplate) {
+  selectedTemplate.value = row;
+  drawerActiveTab.value = "versions";
+  await Promise.all([loadVersions(), loadScopes()]);
+  drawerVisible.value = true;
+}
+
+function openTemplateCreate() {
+  templateEditing.value = false;
+  resetTemplate();
+  templateVisible.value = true;
+}
+
+async function openTemplateEdit(row: OnboardingContractTemplate) {
+  const { data } = await onboardingTaskApi.templateDetail({ id: row.id });
+  templateEditing.value = true;
+  Object.assign(templateForm, data);
+  templateVisible.value = true;
+}
+
+async function saveTemplate() {
+  if (!templateForm.templateCode || !templateForm.templateName || !templateForm.contractType) {
+    return ElMessage.warning("请填写模板编码、名称和合同类型");
+  }
+
+  await onboardingTaskApi.saveTemplate(templateForm, templateEditing.value);
+  templateVisible.value = false;
+  templateTable.value?.refresh();
+  ElMessage.success("保存成功");
+}
+
+async function removeTemplate(row: OnboardingContractTemplate) {
+  await ElMessageBox.confirm(`确认删除合同模板“${row.templateName}”？`, "删除确认", { type: "warning" });
+  await onboardingTaskApi.deleteTemplate([row.id]);
+  templateTable.value?.refresh();
+  ElMessage.success("删除成功");
+}
+
+function openVersionCreate() {
+  resetVersion();
+  versionVisible.value = true;
+}
+
+function beforeDocxUpload(file: File) {
+  if (!file.name.toLowerCase().endsWith(".docx")) {
+    ElMessage.error("合同模板仅支持 DOCX 文件");
+    return false;
+  }
+  return true;
+}
+
+async function uploadDocx(options: any) {
+  const form = new FormData();
+  form.append("file", options.file);
+  try {
+    const { data } = await onboardingTaskApi.uploadDocx(form);
+    versionForm.sourceDocxFileId = data;
+    options.onSuccess?.(data);
+    ElMessage.success("DOCX 文件上传成功");
+  } catch (error) {
+    options.onError?.(error);
+  }
+}
+
+async function saveVersion() {
+  if (!selectedTemplate.value || !versionForm.versionNo || !versionForm.sourceDocxFileId) {
+    return ElMessage.warning("请填写版本号并上传DOCX文件");
+  }
+
+  await onboardingTaskApi.addVersion({
+    ...versionForm,
+    templateId: selectedTemplate.value.id
+  });
+
+  versionVisible.value = false;
+  await loadVersions();
+  ElMessage.success("版本已保存");
+}
+
+async function changeVersionStatus(row: OnboardingContractVersion, status: string) {
+  await onboardingTaskApi.setVersionStatus({ id: row.id, versionStatus: status });
+  await loadVersions();
+  ElMessage.success(`版本状态已更新为：${versionText(status)}`);
+}
+
+function downloadDocx(fileId?: number) {
+  if (!fileId) return ElMessage.warning("暂无DOCX源文件");
+  window.open(`/api/sys/dev/file/download?id=${fileId}`, "_blank");
+}
+
+type EpTagType = "success" | "warning" | "info" | "primary" | "danger";
+
+function versionText(status: string) {
+  return status === "enabled" ? "已启用" : status === "disabled" ? "已停用" : "草稿";
+}
+
+function versionType(status: string): EpTagType {
+  return status === "enabled" ? "success" : status === "disabled" ? "info" : "warning";
+}
+
+function variableTypeTag(type: string): EpTagType {
+  const map: Record<string, EpTagType> = {
+    employee: "primary",
+    company: "success",
+    contract: "warning",
+    system: "info"
+  };
+  return map[type] || "info";
+}
+
+function variableTypeText(type: string) {
+  const map: Record<string, string> = {
+    employee: "员工填写",
+    company: "公司信息",
+    contract: "人事合同参数",
+    system: "系统自动"
+  };
+  return map[type] || type;
+}
+
+function formatPlaceholder(code: string) {
+  return `{{${code}}}`;
+}
+
+function copyPlaceholder(code: string) {
+  navigator.clipboard.writeText(`{{${code}}}`);
+  ElMessage.success(`占位符 {{${code}}} 已复制到剪贴板`);
+}
+
+async function openVariables(row: OnboardingContractVersion) {
+  selectedVersion.value = row;
+  await loadVariables();
+  variablesVisible.value = true;
+}
+
+function openVariableCreate() {
+  variableEditing.value = false;
+  resetVariable();
+  variableVisible.value = true;
+}
+
+function openVariableEdit(row: OnboardingTemplateVariable) {
+  variableEditing.value = true;
+  Object.assign(variableForm, row);
+  variableVisible.value = true;
+}
+
+async function saveVariable() {
+  if (
+    !selectedVersion.value ||
+    !variableForm.variableCode ||
+    !variableForm.variableName ||
+    !variableForm.variableType ||
+    !variableForm.dataType
+  ) {
+    return ElMessage.warning("请填写变量编码、名称、类型和数据类型");
+  }
+
+  await onboardingTaskApi.saveVariable(
+    {
+      ...variableForm,
+      templateVersionId: selectedVersion.value.id
+    },
+    variableEditing.value
+  );
+
+  variableVisible.value = false;
+  await loadVariables();
+  ElMessage.success("变量已保存");
+}
+
+async function removeVariable(row: OnboardingTemplateVariable) {
+  await ElMessageBox.confirm(`确认删除变量“${row.variableName}”？`, "删除确认", { type: "warning" });
+  await onboardingTaskApi.deleteVariable([row.id]);
+  await loadVariables();
+  ElMessage.success("删除成功");
+}
+
+async function onScopeCompanyChange(companyId: number) {
+  scopeForm.positionId = undefined;
+  const { data } = await onboardingTaskApi.listPositions(companyId);
+  scopePositions.value = data;
+}
+
+async function saveScope() {
+  if (!selectedTemplate.value || !scopeForm.companyId || !scopeForm.templateVersionId) {
+    return ElMessage.warning("请选择公司和已启用的合同版本");
+  }
+
+  await onboardingTaskApi.addScope({
+    ...scopeForm,
+    templateId: selectedTemplate.value.id
+  });
+
+  await loadScopes();
+  resetScope();
+  ElMessage.success("适用范围已添加");
+}
+
+async function removeScope(row: OnboardingContractScope) {
+  await ElMessageBox.confirm("确认删除该适用范围？", "删除确认", { type: "warning" });
+  await onboardingTaskApi.deleteScope([row.id]);
+  await loadScopes();
+  ElMessage.success("删除成功");
+}
+
+const companyName = (id: number) => companies.value.find(c => c.id === id)?.companyName || id;
+
+const positionName = (id?: number) => {
+  if (!id) return "全公司 (所有岗位)";
+  return scopePositions.value.find(p => p.id === id)?.positionName || id;
+};
+
+const versionName = (id: number) => versions.value.find(v => v.id === id)?.versionNo || id;
+
+onMounted(loadCompanies);
+</script>
+
+<style scoped>
+:deep(.table-search) {
+  margin-bottom: 12px !important;
+  border-radius: 8px;
+}
+
+:deep(.table-main) {
+  border-radius: 8px;
+}
+
+.drawer-content-box {
+  padding: 0 4px;
+}
+
+.template-header-card {
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px 20px;
+  margin-bottom: 16px;
+}
+
+.template-title-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.template-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.template-meta-row {
+  display: flex;
+  gap: 20px;
+  font-size: 13px;
+  color: #64748b;
+}
+
+.pane-action-bar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.pane-tip-text {
+  font-size: 13px;
+  color: #64748b;
+}
+
+.mt-3 {
+  margin-top: 12px;
+}
+
+.mt-4 {
+  margin-top: 16px;
+}
+
+.font-bold {
+  font-weight: 600;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.file-uploaded-tag {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #10b981;
+  margin-top: 6px;
+}
+
+.toolbar-flex {
+  display: flex;
+  align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/biz/onboarding/employee/index.vue b/src/views/biz/onboarding/employee/index.vue
new file mode 100644
index 0000000..1c4fb0b
--- /dev/null
+++ b/src/views/biz/onboarding/employee/index.vue
@@ -0,0 +1,371 @@
+<template>
+  <div class="table-box">
+    <ProTable
+      ref="proTable"
+      title="正式员工档案"
+      :columns="columns"
+      :request-api="onboardingTaskApi.employeePage"
+    >
+      <template #operation="scope">
+        <el-button link type="primary" icon="UserFilled" @click="showDetail(scope.row)">
+          查看完整档案
+        </el-button>
+      </template>
+    </ProTable>
+
+    <!-- 员工完整档案抽屉 -->
+    <el-drawer
+      v-model="detailVisible"
+      :title="`员工档案详情 · ${detail?.employee?.employeeName || ''}`"
+      size="820px"
+      destroy-on-close
+    >
+      <div v-if="detail?.employee" class="employee-drawer-content">
+        <!-- 头部个人简要信息 -->
+        <div class="employee-header-card">
+          <el-avatar :size="64" class="employee-avatar">
+            {{ detail.employee.employeeName ? detail.employee.employeeName.substring(0, 1) : '员' }}
+          </el-avatar>
+          <div class="employee-header-info">
+            <div class="employee-name-row">
+              <span class="employee-name">{{ detail.employee.employeeName }}</span>
+              <el-tag size="small" :type="detail.employee.gender === '女' ? 'danger' : 'primary'" effect="plain">
+                {{ detail.employee.gender || '未知' }}
+              </el-tag>
+              <el-tag size="small" type="success">正式员工</el-tag>
+            </div>
+            <div class="employee-meta-row">
+              <span>员工编号：{{ detail.employee.employeeNo || '-' }}</span>
+              <span>联系电话：{{ detail.employee.phone }}</span>
+              <span>入职日期：{{ detail.employee.entryDate || '-' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <el-tabs v-model="activeTab" class="employee-tabs">
+          <!-- 1. 基本人事档案 -->
+          <el-tab-pane label="基本人事档案" name="basic">
+            <el-card shadow="never" class="section-card">
+              <template #header>
+                <div class="card-header-title">身份与联系信息</div>
+              </template>
+              <el-descriptions :column="2" border>
+                <el-descriptions-item label="姓名">{{ detail.employee.employeeName }}</el-descriptions-item>
+                <el-descriptions-item label="性别">{{ detail.employee.gender || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="联系电话">{{ detail.employee.phone }}</el-descriptions-item>
+                <el-descriptions-item label="身份证号码">{{ detail.employee.idCardNumber }}</el-descriptions-item>
+                <el-descriptions-item label="出生日期">{{ detail.employee.birthDate || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="民族">{{ detail.employee.nation || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="户口所在地" :span="2">
+                  {{ detail.employee.registeredResidence || '-' }}
+                </el-descriptions-item>
+                <el-descriptions-item label="现居通讯地址" :span="2">
+                  {{ detail.employee.contactAddress || '-' }}
+                </el-descriptions-item>
+              </el-descriptions>
+            </el-card>
+
+            <el-card shadow="never" class="section-card mt-4">
+              <template #header>
+                <div class="card-header-title">学历与就职信息</div>
+              </template>
+              <el-descriptions :column="2" border>
+                <el-descriptions-item label="毕业院校">{{ detail.employee.college || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="最高学历">{{ detail.employee.education || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="所学专业">{{ detail.employee.major || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="部门名称">{{ detail.employee.departmentName || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="合同社保单位">{{ detail.employee.socialInsuranceCompany || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="合同性质">{{ detail.employee.contractNature || '全职劳动合同' }}</el-descriptions-item>
+                <el-descriptions-item label="合同开始日期">{{ detail.employee.contractStartDate || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="合同终止日期">{{ detail.employee.contractEndDate || '-' }}</el-descriptions-item>
+              </el-descriptions>
+            </el-card>
+
+            <el-card shadow="never" class="section-card mt-4">
+              <template #header>
+                <div class="card-header-title">工资卡账户信息</div>
+              </template>
+              <el-descriptions :column="2" border>
+                <el-descriptions-item label="银行卡号">{{ detail.employee.bankCardNumber || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="开户人姓名">{{ detail.employee.bankAccountName || detail.employee.employeeName }}</el-descriptions-item>
+                <el-descriptions-item label="工资卡开户行" :span="2">{{ detail.employee.bankName || '-' }}</el-descriptions-item>
+              </el-descriptions>
+            </el-card>
+          </el-tab-pane>
+
+          <!-- 2. 归档合同与协议 -->
+          <el-tab-pane label="归档合同协议" name="contracts">
+            <el-empty v-if="!detail.contracts?.length" description="暂无已归档的劳动合同" />
+            <div v-else class="contracts-list">
+              <div v-for="contract in detail.contracts" :key="contract.id" class="contract-box">
+                <div class="contract-info-left">
+                  <div class="contract-title font-bold">{{ contract.contractName }}</div>
+                  <div class="contract-meta-text text-secondary">
+                    <span>状态：{{ contract.contractStatus }}</span>
+                    <span v-if="contract.offlineSignedAt">· 线下签署于：{{ formatTime(contract.offlineSignedAt) }}</span>
+                  </div>
+                </div>
+                <div class="contract-action-right">
+                  <el-button
+                    v-if="contract.generatedDocxFileId"
+                    type="primary"
+                    plain
+                    size="small"
+                    icon="Download"
+                    @click="download(contract.generatedDocxFileId)"
+                  >
+                    下载合同 DOCX
+                  </el-button>
+                  <el-tag v-else type="info">尚未生成电子文件</el-tag>
+                </div>
+              </div>
+            </div>
+          </el-tab-pane>
+
+          <!-- 3. 入职流转与审核日志 -->
+          <el-tab-pane label="入职流转时间轴" name="audits">
+            <el-empty v-if="!detail.audits?.length" description="暂无流转记录" />
+            <div v-else class="timeline-box">
+              <el-timeline>
+                <el-timeline-item
+                  v-for="item in detail.audits"
+                  :key="item.id"
+                  type="primary"
+                  :timestamp="formatTime(item.auditedAt)"
+                  placement="top"
+                >
+                  <div class="audit-card">
+                    <div class="audit-action-name font-bold">
+                      {{ auditActionText(item.auditAction) }}
+                      <span v-if="item.createUser" class="audit-operator">（操作人：{{ item.createUser }}）</span>
+                    </div>
+                    <div v-if="item.auditOpinion" class="audit-opinion">
+                      审核意见：{{ item.auditOpinion }}
+                    </div>
+                  </div>
+                </el-timeline-item>
+              </el-timeline>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+      <template #footer>
+        <el-button @click="detailVisible = false">关闭</el-button>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup lang="ts" name="onboardingEmployee">
+import { ref } from "vue";
+import { UserFilled, Download } from "@element-plus/icons-vue";
+import {
+  onboardingTaskApi,
+  type OnboardingEmployee
+} from "@/api/modules/biz/onboarding";
+import type { ColumnProps } from "@/components/ProTable/interface";
+
+const detailVisible = ref(false);
+const activeTab = ref("basic");
+const detail = ref<any>();
+
+const columns: ColumnProps<OnboardingEmployee>[] = [
+  {
+    prop: "employeeNo",
+    label: "员工编号",
+    minWidth: 160
+  },
+  {
+    prop: "employeeName",
+    label: "姓名",
+    minWidth: 140,
+    search: { el: "input" }
+  },
+  {
+    prop: "gender",
+    label: "性别",
+    minWidth: 80,
+    align: "center"
+  },
+  {
+    prop: "phone",
+    label: "手机号码",
+    minWidth: 160,
+    search: { el: "input" }
+  },
+  {
+    prop: "entryDate",
+    label: "入职日期",
+    minWidth: 140
+  },
+  {
+    prop: "createTime",
+    label: "建档时间",
+    minWidth: 180,
+    render: scope => formatTime(scope.row.createTime)
+  },
+  {
+    prop: "operation",
+    label: "操作",
+    fixed: "right",
+    width: 160
+  }
+];
+
+const auditActionText = (action: string) => {
+  const map: Record<string, string> = {
+    submit: "候选人提交入职资料",
+    approve: "人事复核通过并转正建档",
+    reject: "人事退回补充资料",
+    archive: "任务归档",
+    revoke: "任务撤销"
+  };
+  return map[action] || action;
+};
+
+const formatTime = (timeStr?: string) => {
+  if (!timeStr) return "-";
+  return timeStr.replace("T", " ").substring(0, 19);
+};
+
+async function showDetail(row: OnboardingEmployee) {
+  const { data } = await onboardingTaskApi.employeeDetail({
+    id: row.id
+  });
+
+  detail.value = data;
+  activeTab.value = "basic";
+  detailVisible.value = true;
+}
+
+function download(fileId: number) {
+  window.open(`/api/sys/dev/file/download?id=${fileId}`, "_blank");
+}
+</script>
+
+<style scoped>
+:deep(.table-search) {
+  margin-bottom: 12px !important;
+  border-radius: 8px;
+}
+
+:deep(.table-main) {
+  border-radius: 8px;
+}
+
+.employee-drawer-content {
+  padding: 0 8px;
+}
+
+.employee-header-card {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.employee-avatar {
+  background: #2563eb;
+  color: #fff;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.employee-header-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.employee-name-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.employee-name {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.employee-meta-row {
+  display: flex;
+  gap: 16px;
+  font-size: 13px;
+  color: #64748b;
+}
+
+.section-card {
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+}
+
+.card-header-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: #1e293b;
+}
+
+.mt-4 {
+  margin-top: 16px;
+}
+
+.font-bold {
+  font-weight: 600;
+}
+
+.text-secondary {
+  color: #64748b;
+}
+
+/* 合同列表 */
+.contracts-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.contract-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+
+.contract-meta-text {
+  font-size: 13px;
+  margin-top: 4px;
+}
+
+/* 时间轴 */
+.timeline-box {
+  padding: 16px 8px;
+}
+
+.audit-card {
+  background: #f8fafc;
+  padding: 10px 14px;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+}
+
+.audit-operator {
+  font-size: 13px;
+  color: #64748b;
+  font-weight: normal;
+}
+
+.audit-opinion {
+  font-size: 13px;
+  color: #dc2626;
+  margin-top: 4px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/biz/onboarding/entry-config/index.vue b/src/views/biz/onboarding/entry-config/index.vue
new file mode 100644
index 0000000..90c23e5
--- /dev/null
+++ b/src/views/biz/onboarding/entry-config/index.vue
@@ -0,0 +1,652 @@
+<template>
+  <div class="main-box config-container">
+    <el-tabs v-model="activeTab" class="config-tabs">
+      <el-tab-pane label="动态填写字段" name="fields">
+        <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>
+        </div>
+      </el-tab-pane>
+
+      <el-tab-pane label="上传资料类型" name="materials">
+        <div class="tab-card-wrapper">
+          <div class="toolbar">
+            <el-button type="primary" icon="Plus" @click="openMaterialCreate">
+              新增资料类型
+            </el-button>
+          </div>
+
+          <el-table :data="materialTypes" border stripe>
+            <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">
+              <template #default="scope">
+                <code>{{ scope.row.allowedExtensions || '不限' }}</code>
+              </template>
+            </el-table-column>
+            <el-table-column prop="maxFileCount" label="最大数量" width="100" align="center" />
+            <el-table-column prop="maxFileSizeMb" label="最大限制(MB)" width="120" align="center" />
+            <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="openMaterialEdit(scope.row)">
+                  编辑
+                </el-button>
+
+                <el-button link type="danger" icon="Delete" @click="removeMaterial(scope.row)">
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-tab-pane>
+
+      <el-tab-pane label="公司岗位要求" name="requirements">
+        <div class="tab-card-wrapper">
+          <el-alert title="请先选择公司，再为全公司或某个岗位分别配置员工必填信息和上传资料。" type="info" :closable="false" class="hint" />
+
+          <el-select v-model="selectedCompanyId" placeholder="请选择公司" filterable @change="loadRequirements">
+            <el-option v-for="company in companies" :key="company.id" :label="company.companyName" :value="company.id" />
+          </el-select>
+
+        <template v-if="selectedCompanyId">
+          <el-divider />
+
+          <el-tabs v-model="requirementTab">
+            <el-tab-pane label="填写字段要求" name="form">
+              <div class="toolbar">
+                <el-button type="primary" @click="openRequirementCreate('form')">
+                  新增填写要求
+                </el-button>
+              </div>
+
+              <el-table :data="formRequirements" border>
+                <el-table-column label="字段">
+                  <template #default="scope">
+                    {{ fieldName(scope.row.fieldId) }}
+                  </template>
+                </el-table-column>
+
+                <el-table-column label="岗位">
+                  <template #default="scope">
+                    {{ positionName(scope.row.positionId) }}
+                  </template>
+                </el-table-column>
+
+                <el-table-column label="必填">
+                  <template #default="scope">
+                    {{ scope.row.required ? "是" : "否" }}
+                  </template>
+                </el-table-column>
+
+                <el-table-column prop="sortCode" label="排序" />
+
+                <el-table-column label="操作" width="140">
+                  <template #default="scope">
+                    <el-button link type="primary" @click="openRequirementEdit('form', scope.row)">
+                      编辑
+                    </el-button>
+
+                    <el-button link type="danger" @click="removeRequirement('form', scope.row)">
+                      删除
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+
+            <el-tab-pane label="上传资料要求" name="material">
+              <div class="toolbar">
+                <el-button type="primary" @click="openRequirementCreate('material')">
+                  新增资料要求
+                </el-button>
+              </div>
+
+              <el-table :data="materialRequirements" border>
+                <el-table-column label="资料类型">
+                  <template #default="scope">
+                    {{ materialName(scope.row.materialTypeId) }}
+                  </template>
+                </el-table-column>
+
+                <el-table-column label="岗位">
+                  <template #default="scope">
+                    {{ positionName(scope.row.positionId) }}
+                  </template>
+                </el-table-column>
+
+                <el-table-column label="必传">
+                  <template #default="scope">
+                    {{ scope.row.required ? "是" : "否" }}
+                  </template>
+                </el-table-column>
+
+                <el-table-column prop="sortCode" label="排序" />
+
+                <el-table-column label="操作" width="140">
+                  <template #default="scope">
+                    <el-button link type="primary" @click="openRequirementEdit('material', scope.row)">
+                      编辑
+                    </el-button>
+
+                    <el-button link type="danger" @click="removeRequirement('material', scope.row)">
+                      删除
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+          </el-tabs>
+        </template>
+        </div>
+      </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-item label="资料编码" required>
+          <el-input v-model="materialForm.materialCode" />
+        </el-form-item>
+
+        <el-form-item label="资料名称" required>
+          <el-input v-model="materialForm.materialName" />
+        </el-form-item>
+
+        <el-form-item label="允许扩展名">
+          <el-input v-model="materialForm.allowedExtensions" placeholder="如：jpg,png,pdf" />
+        </el-form-item>
+
+        <el-form-item label="最大文件数量">
+          <el-input-number v-model="materialForm.maxFileCount" :min="1" />
+        </el-form-item>
+
+        <el-form-item label="最大大小(MB)">
+          <el-input-number v-model="materialForm.maxFileSizeMb" :min="1" />
+        </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-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="materialVisible = false">
+          取消
+        </el-button>
+
+        <el-button type="primary" @click="saveMaterial">
+          保存
+        </el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="requirementVisible" :title="requirementKind === 'form' ? '填写字段要求' : '上传资料要求'" width="560px"
+      destroy-on-close>
+      <el-form :model="requirementForm" label-width="110px">
+        <el-form-item label="所属公司">
+          <el-select v-model="requirementForm.companyId" disabled>
+            <el-option v-for="company in companies" :key="company.id" :label="company.companyName"
+              :value="company.id" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="适用岗位">
+          <el-select v-model="requirementForm.positionId" clearable placeholder="不选表示全公司">
+            <el-option v-for="position in positions" :key="position.id" :label="position.positionName"
+              :value="position.id" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item v-if="requirementKind === 'form'" label="填写字段" required>
+          <el-select v-model="requirementForm.fieldId">
+            <el-option v-for="field in enabledFields" :key="field.id" :label="field.fieldName" :value="field.id" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item v-else label="资料类型" required>
+          <el-select v-model="requirementForm.materialTypeId">
+            <el-option v-for="material in enabledMaterials" :key="material.id" :label="material.materialName"
+              :value="material.id" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="是否必填/必传">
+          <el-switch v-model="requirementForm.required" />
+        </el-form-item>
+
+        <el-form-item label="排序">
+          <el-input-number v-model="requirementForm.sortCode" :min="0" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="requirementVisible = false">
+          取消
+        </el-button>
+
+        <el-button type="primary" @click="saveRequirement">
+          保存
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts" name="onboardingEntryConfig">
+import {
+  onboardingTaskApi,
+  type OnboardingCompanyOption,
+  type OnboardingFormField,
+  type OnboardingFormRequirement,
+  type OnboardingMaterialRequirement,
+  type OnboardingMaterialType,
+  type OnboardingPositionOption
+} from "@/api/modules/biz/onboarding";
+
+const activeTab = ref("fields");
+const requirementTab = ref("form");
+
+const fields = ref<OnboardingFormField[]>([]);
+const materialTypes = ref<OnboardingMaterialType[]>([]);
+const companies = ref<OnboardingCompanyOption[]>([]);
+const positions = ref<OnboardingPositionOption[]>([]);
+
+const formRequirements = ref<OnboardingFormRequirement[]>([]);
+const materialRequirements = ref<OnboardingMaterialRequirement[]>([]);
+
+const selectedCompanyId = ref<number>();
+
+const fieldVisible = ref(false);
+const materialVisible = ref(false);
+const requirementVisible = ref(false);
+
+const requirementKind = ref<"form" | "material">("form");
+
+const fieldForm = reactive<Partial<OnboardingFormField>>({});
+const materialForm = reactive<Partial<OnboardingMaterialType>>({});
+const requirementForm = reactive<any>({});
+
+const enabledFields = computed(() =>
+  fields.value.filter(item => item.status === "enable")
+);
+
+const enabledMaterials = computed(() =>
+  materialTypes.value.filter(item => item.status === "enable")
+);
+
+async function loadBase() {
+  const [
+    fieldResult,
+    materialResult,
+    companyResult
+  ] = await Promise.all([
+    onboardingTaskApi.listFormFields(),
+    onboardingTaskApi.listMaterialTypes(),
+    onboardingTaskApi.listCompanies()
+  ]);
+
+  fields.value = fieldResult.data;
+  materialTypes.value = materialResult.data;
+  companies.value = companyResult.data;
+}
+
+async function loadRequirements() {
+  if (!selectedCompanyId.value) return;
+
+  const [
+    formResult,
+    materialResult,
+    positionResult
+  ] = await Promise.all([
+    onboardingTaskApi.listFormRequirements(selectedCompanyId.value),
+    onboardingTaskApi.listMaterialRequirements(selectedCompanyId.value),
+    onboardingTaskApi.listPositions(selectedCompanyId.value)
+  ]);
+
+  formRequirements.value = formResult.data;
+  materialRequirements.value = materialResult.data;
+  positions.value = positionResult.data;
+}
+
+function resetField() {
+  Object.assign(fieldForm, {
+    id: undefined,
+    fieldCode: "",
+    fieldName: "",
+    dataType: "string",
+    placeholder: "",
+    optionsJson: "",
+    validationRule: "",
+    status: "enable"
+  });
+}
+
+function resetMaterial() {
+  Object.assign(materialForm, {
+    id: undefined,
+    materialCode: "",
+    materialName: "",
+    allowedExtensions: "",
+    maxFileCount: 1,
+    maxFileSizeMb: undefined,
+    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;
+
+  await loadBase();
+}
+
+function openMaterialCreate() {
+  resetMaterial();
+  materialVisible.value = true;
+}
+
+function openMaterialEdit(row: OnboardingMaterialType) {
+  Object.assign(materialForm, row);
+  materialVisible.value = true;
+}
+
+async function saveMaterial() {
+  if (
+    !materialForm.materialCode ||
+    !materialForm.materialName
+  ) {
+    return ElMessage.warning(
+      "请填写资料编码和名称"
+    );
+  }
+
+  await onboardingTaskApi.saveMaterialType(materialForm);
+
+  materialVisible.value = false;
+
+  await loadBase();
+}
+
+async function removeField(row: OnboardingFormField) {
+  await ElMessageBox.confirm(
+    `确认删除字段“${row.fieldName}”？`,
+    "删除确认"
+  );
+
+  await onboardingTaskApi.deleteFormFields([row.id]);
+
+  await loadBase();
+}
+
+async function removeMaterial(row: OnboardingMaterialType) {
+  await ElMessageBox.confirm(
+    `确认删除资料类型“${row.materialName}”？`,
+    "删除确认"
+  );
+
+  await onboardingTaskApi.deleteMaterialTypes([row.id]);
+
+  await loadBase();
+}
+
+function resetRequirement() {
+  Object.assign(requirementForm, {
+    id: undefined,
+    companyId: selectedCompanyId.value,
+    positionId: undefined,
+    fieldId: undefined,
+    materialTypeId: undefined,
+    required: true,
+    sortCode: 0
+  });
+}
+
+function openRequirementCreate(
+  kind: "form" | "material"
+) {
+  requirementKind.value = kind;
+
+  resetRequirement();
+
+  requirementVisible.value = true;
+}
+
+function openRequirementEdit(
+  kind: "form" | "material",
+  row: any
+) {
+  requirementKind.value = kind;
+
+  Object.assign(requirementForm, row);
+
+  requirementVisible.value = true;
+}
+
+async function saveRequirement() {
+  if (
+    requirementKind.value === "form" &&
+    !requirementForm.fieldId
+  ) {
+    return ElMessage.warning("请选择填写字段");
+  }
+
+  if (
+    requirementKind.value === "material" &&
+    !requirementForm.materialTypeId
+  ) {
+    return ElMessage.warning("请选择资料类型");
+  }
+
+  if (requirementKind.value === "form") {
+    await onboardingTaskApi.saveFormRequirement(
+      requirementForm
+    );
+  } else {
+    await onboardingTaskApi.saveMaterialRequirement(
+      requirementForm
+    );
+  }
+
+  requirementVisible.value = false;
+
+  await loadRequirements();
+}
+
+async function removeRequirement(
+  kind: "form" | "material",
+  row: any
+) {
+  await ElMessageBox.confirm(
+    "确认删除该要求？",
+    "删除确认"
+  );
+
+  if (kind === "form") {
+    await onboardingTaskApi.deleteFormRequirements([
+      row.id
+    ]);
+  } else {
+    await onboardingTaskApi.deleteMaterialRequirements([
+      row.id
+    ]);
+  }
+
+  await loadRequirements();
+}
+
+const fieldName = (id: number) =>
+  fields.value.find(item => item.id === id)?.fieldName || id;
+
+const materialName = (id: number) =>
+  materialTypes.value.find(item => item.id === id)?.materialName || id;
+
+const positionName = (id?: number) =>
+  !id
+    ? "全公司"
+    : positions.value.find(item => item.id === id)?.positionName || id;
+
+onMounted(loadBase);
+</script>
+
+<style scoped>
+.config-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 0 !important;
+  background: transparent !important;
+}
+
+.config-tabs {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: transparent;
+}
+
+.config-tabs :deep(.el-tabs__header) {
+  background: #fff;
+  padding: 10px 16px 0;
+  margin: 0 0 10px 0;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.config-tabs :deep(.el-tabs__content) {
+  flex: 1;
+  overflow: auto;
+}
+
+.tab-card-wrapper {
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.toolbar {
+  margin-bottom: 14px;
+}
+
+.hint {
+  margin-bottom: 14px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/biz/onboarding/setup/index.vue b/src/views/biz/onboarding/setup/index.vue
new file mode 100644
index 0000000..ec3ea3d
--- /dev/null
+++ b/src/views/biz/onboarding/setup/index.vue
@@ -0,0 +1,525 @@
+<template>
+  <div class="main-box setup-container">
+    <el-tabs v-model="activeTab" class="setup-tabs">
+      <!-- 1. 入职公司管理 -->
+      <el-tab-pane label="入职公司" name="company">
+        <div class="table-wrapper">
+          <ProTable
+            ref="companyTable"
+            title="入职公司列表"
+            :columns="companyColumns"
+            :request-api="onboardingTaskApi.companyPage"
+            :search-col="5"
+          >
+            <template #tableHeader>
+              <el-button type="primary" icon="Plus" @click="openCompanyCreate">
+                新增入职公司
+              </el-button>
+            </template>
+
+            <template #status="scope">
+              <el-tag size="small" :type="scope.row.status === 'enable' ? 'success' : 'info'">
+                {{ scope.row.status === "enable" ? "启用" : "停用" }}
+              </el-tag>
+            </template>
+
+            <template #operation="scope">
+              <el-button link type="primary" icon="Edit" @click="openCompanyEdit(scope.row)">
+                编辑
+              </el-button>
+
+              <el-button link type="danger" icon="Delete" @click="removeCompany(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </ProTable>
+        </div>
+      </el-tab-pane>
+
+      <!-- 2. 入职岗位管理 -->
+      <el-tab-pane label="入职岗位" name="position">
+        <div class="table-wrapper">
+          <ProTable
+            ref="positionTable"
+            title="入职岗位列表"
+            :columns="positionColumns"
+            :request-api="onboardingTaskApi.positionPage"
+            :search-col="5"
+          >
+            <template #tableHeader>
+              <el-button type="primary" icon="Plus" @click="openPositionCreate">
+                新增入职岗位
+              </el-button>
+            </template>
+
+            <template #companyId="scope">
+              <el-tag effect="plain" type="primary">
+                {{ getCompanyName(scope.row.companyId) }}
+              </el-tag>
+            </template>
+
+            <template #status="scope">
+              <el-tag size="small" :type="scope.row.status === 'enable' ? 'success' : 'info'">
+                {{ scope.row.status === "enable" ? "启用" : "停用" }}
+              </el-tag>
+            </template>
+
+            <template #operation="scope">
+              <el-button link type="primary" icon="Edit" @click="openPositionEdit(scope.row)">
+                编辑
+              </el-button>
+
+              <el-button link type="danger" icon="Delete" @click="removePosition(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </ProTable>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+
+    <!-- 新增 / 编辑弹窗 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="680px"
+      destroy-on-close
+      append-to-body
+    >
+      <el-form v-if="dialogKind === 'company'" :model="companyForm" label-width="140px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="公司编码" required>
+              <el-input v-model="companyForm.companyCode" placeholder="如：TECH_CORP" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="公司简称/名称" required>
+              <el-input v-model="companyForm.companyName" placeholder="如：总公司 / 科技分部" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-form-item label="合同甲方全称" required>
+          <el-input v-model="companyForm.legalName" placeholder="用于合同填写的法定主体全称" />
+        </el-form-item>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="统一社会信用代码">
+              <el-input v-model="companyForm.unifiedSocialCreditCode" placeholder="18位统一信用代码" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="法定代表人">
+              <el-input v-model="companyForm.legalRepresentative" placeholder="法定代表人姓名" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="联系电话">
+              <el-input v-model="companyForm.contactPhone" placeholder="企业联系电话" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="状态" required>
+              <el-select v-model="companyForm.status" class="w-full">
+                <el-option label="启用" value="enable" />
+                <el-option label="停用" value="disable" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-form-item label="注册地址">
+          <el-input v-model="companyForm.registeredAddress" placeholder="企业法定注册地址" />
+        </el-form-item>
+
+        <el-form-item label="备注">
+          <el-input v-model="companyForm.remark" type="textarea" :rows="2" placeholder="备注信息" />
+        </el-form-item>
+      </el-form>
+
+      <el-form v-else :model="positionForm" label-width="140px">
+        <el-form-item label="所属公司" required>
+          <el-select v-model="positionForm.companyId" placeholder="请选择所属公司" filterable class="w-full">
+            <el-option
+              v-for="company in companies"
+              :key="company.id"
+              :label="company.companyName"
+              :value="company.id"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="岗位编码" required>
+              <el-input v-model="positionForm.positionCode" placeholder="如：DEV_FRONTEND" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="岗位名称" required>
+              <el-input v-model="positionForm.positionName" placeholder="如：高级前端开发工程师" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="默认合同年限">
+              <el-input-number v-model="positionForm.defaultContractYears" :min="1" :max="20" class="w-full" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="默认试用期(月)">
+              <el-input-number v-model="positionForm.defaultProbationMonths" :min="0" :max="12" class="w-full" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-form-item label="状态" required>
+          <el-select v-model="positionForm.status" class="w-full">
+            <el-option label="启用" value="enable" />
+            <el-option label="停用" value="disable" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="备注">
+          <el-input v-model="positionForm.remark" type="textarea" :rows="2" placeholder="备注信息" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="save">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts" name="onboardingSetup">
+import { ref, reactive, computed, onMounted } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Plus, Edit, Delete } from "@element-plus/icons-vue";
+import {
+  onboardingTaskApi,
+  type OnboardingCompany,
+  type OnboardingCompanyOption,
+  type OnboardingPosition
+} from "@/api/modules/biz/onboarding";
+import type { ColumnProps, ProTableInstance, EnumProps } from "@/components/ProTable/interface";
+
+const activeTab = ref("company");
+
+const companyTable = ref<ProTableInstance>();
+const positionTable = ref<ProTableInstance>();
+
+const companies = ref<OnboardingCompanyOption[]>([]);
+const companyOptions = computed<EnumProps[]>(() =>
+  companies.value.map(c => ({
+    label: c.companyName,
+    value: c.id
+  }))
+);
+
+const getCompanyName = (companyId?: number) => {
+  if (!companyId) return "-";
+  const found = companies.value.find(c => c.id === companyId);
+  return found ? found.companyName : String(companyId);
+};
+
+const dialogVisible = ref(false);
+const dialogKind = ref<"company" | "position">("company");
+const editing = ref(false);
+
+const emptyCompany = (): Partial<OnboardingCompany> => ({
+  companyCode: "",
+  companyName: "",
+  legalName: "",
+  unifiedSocialCreditCode: "",
+  legalRepresentative: "",
+  registeredAddress: "",
+  contactPhone: "",
+  status: "enable",
+  remark: ""
+});
+
+const emptyPosition = (): Partial<OnboardingPosition> => ({
+  companyId: undefined,
+  positionCode: "",
+  positionName: "",
+  defaultContractYears: 3,
+  defaultProbationMonths: 3,
+  status: "enable",
+  remark: ""
+});
+
+const companyForm = reactive<Partial<OnboardingCompany>>(emptyCompany());
+const positionForm = reactive<Partial<OnboardingPosition>>(emptyPosition());
+
+const dialogTitle = computed(
+  () => `${editing.value ? "编辑" : "新增"}${dialogKind.value === "company" ? "入职公司" : "入职岗位"}`
+);
+
+const companyColumns: ColumnProps<OnboardingCompany>[] = [
+  {
+    prop: "companyCode",
+    label: "公司编码",
+    width: 140,
+    search: { el: "input" }
+  },
+  {
+    prop: "companyName",
+    label: "公司名称",
+    minWidth: 180,
+    search: { el: "input" }
+  },
+  {
+    prop: "legalName",
+    label: "合同甲方全称",
+    minWidth: 220
+  },
+  {
+    prop: "unifiedSocialCreditCode",
+    label: "统一社会信用代码",
+    minWidth: 180
+  },
+  {
+    prop: "legalRepresentative",
+    label: "法定代表人",
+    width: 120
+  },
+  {
+    prop: "contactPhone",
+    label: "联系电话",
+    width: 140
+  },
+  {
+    prop: "status",
+    label: "状态",
+    width: 100,
+    align: "center",
+    enum: [
+      { label: "启用", value: "enable" },
+      { label: "停用", value: "disable" }
+    ],
+    search: { el: "select" }
+  },
+  {
+    prop: "operation",
+    label: "操作",
+    fixed: "right",
+    width: 160
+  }
+];
+
+const positionColumns: ColumnProps<OnboardingPosition>[] = [
+  {
+    prop: "companyId",
+    label: "所属公司",
+    minWidth: 200,
+    enum: companyOptions,
+    search: {
+      el: "select",
+      props: { filterable: true, placeholder: "请选择所属公司" }
+    }
+  },
+  {
+    prop: "positionCode",
+    label: "岗位编码",
+    width: 150,
+    search: { el: "input" }
+  },
+  {
+    prop: "positionName",
+    label: "岗位名称",
+    minWidth: 180,
+    search: { el: "input" }
+  },
+  {
+    prop: "defaultContractYears",
+    label: "默认合同年限",
+    width: 130,
+    align: "center",
+    render: scope => `${scope.row.defaultContractYears || 3} 年`
+  },
+  {
+    prop: "defaultProbationMonths",
+    label: "默认试用期",
+    width: 130,
+    align: "center",
+    render: scope => `${scope.row.defaultProbationMonths ?? 0} 个月`
+  },
+  {
+    prop: "status",
+    label: "状态",
+    width: 100,
+    align: "center",
+    enum: [
+      { label: "启用", value: "enable" },
+      { label: "停用", value: "disable" }
+    ],
+    search: { el: "select" }
+  },
+  {
+    prop: "operation",
+    label: "操作",
+    fixed: "right",
+    width: 160
+  }
+];
+
+async function loadCompanies() {
+  const { data } = await onboardingTaskApi.listCompanies();
+  companies.value = data;
+}
+
+function resetCompany() {
+  Object.assign(companyForm, emptyCompany());
+}
+
+function resetPosition() {
+  Object.assign(positionForm, emptyPosition());
+}
+
+function openCompanyCreate() {
+  dialogKind.value = "company";
+  editing.value = false;
+  resetCompany();
+  dialogVisible.value = true;
+}
+
+function openPositionCreate() {
+  dialogKind.value = "position";
+  editing.value = false;
+  resetPosition();
+  dialogVisible.value = true;
+}
+
+async function openCompanyEdit(row: OnboardingCompany) {
+  const { data } = await onboardingTaskApi.companyDetail({ id: row.id });
+  dialogKind.value = "company";
+  editing.value = true;
+  Object.assign(companyForm, data);
+  dialogVisible.value = true;
+}
+
+async function openPositionEdit(row: OnboardingPosition) {
+  const { data } = await onboardingTaskApi.positionDetail({ id: row.id });
+  dialogKind.value = "position";
+  editing.value = true;
+  Object.assign(positionForm, data);
+  dialogVisible.value = true;
+}
+
+async function save() {
+  if (dialogKind.value === "company") {
+    if (!companyForm.companyCode || !companyForm.companyName || !companyForm.legalName) {
+      return ElMessage.warning("请填写公司编码、公司名称和合同甲方全称");
+    }
+
+    await onboardingTaskApi.saveCompany(companyForm, editing.value);
+    companyTable.value?.refresh();
+    await loadCompanies();
+  } else {
+    if (!positionForm.companyId || !positionForm.positionCode || !positionForm.positionName) {
+      return ElMessage.warning("请填写所属公司、岗位编码和岗位名称");
+    }
+
+    await onboardingTaskApi.savePosition(positionForm, editing.value);
+    positionTable.value?.refresh();
+  }
+
+  dialogVisible.value = false;
+  ElMessage.success("保存成功");
+}
+
+async function removeCompany(row: OnboardingCompany) {
+  await ElMessageBox.confirm(`确认删除公司“${row.companyName}”？`, "删除确认", { type: "warning" });
+  await onboardingTaskApi.deleteCompany([row.id]);
+  companyTable.value?.refresh();
+  await loadCompanies();
+}
+
+async function removePosition(row: OnboardingPosition) {
+  await ElMessageBox.confirm(`确认删除岗位“${row.positionName}”？`, "删除确认", { type: "warning" });
+  await onboardingTaskApi.deletePosition([row.id]);
+  positionTable.value?.refresh();
+}
+
+onMounted(loadCompanies);
+</script>
+
+<style scoped>
+.setup-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 0 !important;
+  background: transparent !important;
+}
+
+.setup-tabs {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: transparent;
+}
+
+.setup-tabs :deep(.el-tabs__header) {
+  background: #fff;
+  padding: 10px 16px 0;
+  margin: 0 0 10px 0;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.setup-tabs :deep(.el-tabs__content) {
+  flex: 1;
+  height: 0;
+  overflow: hidden;
+}
+
+.setup-tabs :deep(.el-tab-pane) {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.table-wrapper {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.table-wrapper :deep(.table-search) {
+  margin-bottom: 12px !important;
+  border-radius: 8px;
+}
+
+.table-wrapper :deep(.table-search .search-isOpen) {
+  display: none !important;
+}
+
+.table-wrapper :deep(.table-search .el-form-item) {
+  margin-bottom: 0 !important;
+}
+
+.table-wrapper :deep(.table-search .el-select),
+.table-wrapper :deep(.table-search .el-input) {
+  max-width: 200px !important;
+}
+
+.table-wrapper :deep(.table-main) {
+  border-radius: 8px;
+}
+
+.w-full {
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/biz/onboarding/task/index.vue b/src/views/biz/onboarding/task/index.vue
new file mode 100644
index 0000000..fa0e0c3
--- /dev/null
+++ b/src/views/biz/onboarding/task/index.vue
@@ -0,0 +1,1199 @@
+<template>
+  <div class="main-box task-page-box">
+    <!-- 顶部状态看板 -->
+    <div class="task-metrics">
+      <div class="metric-card bg-blue">
+        <div class="metric-icon"><el-icon><DocumentAdd /></el-icon></div>
+        <div class="metric-content">
+          <div class="metric-title">待候选人填写</div>
+          <div class="metric-value">{{ statusCounts.pending_fill }}</div>
+        </div>
+      </div>
+      <div class="metric-card bg-orange">
+        <div class="metric-icon"><el-icon><Clock /></el-icon></div>
+        <div class="metric-content">
+          <div class="metric-title">待人事审核 (急办)</div>
+          <div class="metric-value">{{ statusCounts.reviewing }}</div>
+        </div>
+      </div>
+      <div class="metric-card bg-red">
+        <div class="metric-icon"><el-icon><WarningFilled /></el-icon></div>
+        <div class="metric-content">
+          <div class="metric-title">已退回待修改</div>
+          <div class="metric-value">{{ statusCounts.rejected }}</div>
+        </div>
+      </div>
+      <div class="metric-card bg-green">
+        <div class="metric-icon"><el-icon><CircleCheckFilled /></el-icon></div>
+        <div class="metric-content">
+          <div class="metric-title">审核通过 / 已建档</div>
+          <div class="metric-value">{{ statusCounts.approved }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 表格区域 -->
+    <div class="table-box-flex">
+      <ProTable
+        ref="proTable"
+        title="入职任务列表"
+        :columns="columns"
+        :request-api="getTableData"
+      >
+        <template #tableHeader>
+          <el-button type="primary" icon="Plus" @click="openCreate">
+            发起入职任务
+          </el-button>
+        </template>
+
+      <template #taskStatus="scope">
+        <el-tag :type="statusType(scope.row.taskStatus)" effect="light">
+          {{ statusText(scope.row.taskStatus) }}
+        </el-tag>
+      </template>
+
+      <template #operation="scope">
+        <el-button link type="primary" icon="View" @click="showDetail(scope.row)">
+          详情与审核
+        </el-button>
+
+        <el-button
+          v-if="['pending_fill', 'rejected'].includes(scope.row.taskStatus)"
+          link
+          type="primary"
+          icon="Setting"
+          @click="openContractVariables(scope.row)"
+        >
+          合同参数
+        </el-button>
+
+        <el-button
+          v-if="scope.row.taskStatus === 'reviewing'"
+          link
+          type="success"
+          icon="Check"
+          @click="approve(scope.row)"
+        >
+          通过
+        </el-button>
+
+        <el-button
+          v-if="scope.row.taskStatus === 'reviewing'"
+          link
+          type="danger"
+          icon="Close"
+          @click="reject(scope.row)"
+        >
+          退回
+        </el-button>
+
+        <el-button
+          v-if="scope.row.taskStatus === 'approved'"
+          link
+          type="info"
+          icon="FolderChecked"
+          @click="archive(scope.row)"
+        >
+          归档
+        </el-button>
+
+        <el-button
+          v-if="['pending_fill', 'reviewing', 'rejected'].includes(scope.row.taskStatus)"
+          link
+          type="danger"
+          icon="Delete"
+          @click="revoke(scope.row)"
+        >
+          撤销
+        </el-button>
+      </template>
+    </ProTable>
+    </div>
+
+    <!-- 发起任务弹窗 -->
+    <el-dialog v-model="createVisible" title="发起入职任务" width="520px" destroy-on-close>
+      <el-form :model="form" label-width="90px">
+        <el-form-item label="所属公司" required>
+          <el-select
+            v-model="form.companyId"
+            filterable
+            placeholder="请选择公司主体"
+            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-form-item label="入职岗位" required>
+          <el-select
+            v-model="form.positionId"
+            filterable
+            placeholder="请选择岗位"
+            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-form-item label="人事备注">
+          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="填写该候选人入职的相关备注（选填）" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="createVisible = false">取消</el-button>
+        <el-button type="primary" :loading="creating" @click="createTask">立即创建</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 任务创建成功与分享弹窗 -->
+    <el-dialog v-model="shareVisible" title="入职任务已创建" width="560px" destroy-on-close>
+      <el-result icon="success" title="任务创建成功！" sub-title="请先确认合同人事参数，再将专属链接发送给候选人">
+        <template #extra>
+          <div class="share-box">
+            <div class="share-item">
+              <span class="share-label">任务编号：</span>
+              <span class="share-value font-bold">{{ createdTaskInfo?.taskNo }}</span>
+            </div>
+            <div class="share-item">
+              <span class="share-label">专属链接：</span>
+              <el-input :model-value="createdTaskInfo?.linkUrl" readonly size="small">
+                <template #append>
+                  <el-button icon="CopyDocument" @click="copyText(createdTaskInfo?.linkUrl, '专属链接已复制')">
+                    复制
+                  </el-button>
+                </template>
+              </el-input>
+            </div>
+            <div class="share-item">
+              <span class="share-label">有效期至：</span>
+              <span class="share-value text-secondary">{{ createdTaskInfo?.expiresAt }}</span>
+            </div>
+            <div class="share-actions">
+              <el-button type="primary" plain icon="ChatDotRound" @click="copyInviteMessage">
+                复制短信/微信邀请文案
+              </el-button>
+            </div>
+          </div>
+        </template>
+      </el-result>
+      <template #footer>
+        <el-button type="primary" @click="shareVisible = false">完成</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 任务详情与审核大抽屉 -->
+    <el-drawer
+      v-model="detailVisible"
+      :title="`入职任务详情 · ${detail?.task?.taskNo || ''}`"
+      size="860px"
+      destroy-on-close
+    >
+      <div v-if="detail" class="drawer-content">
+        <!-- 头部状态栏 -->
+        <div class="drawer-status-bar">
+          <div class="status-left">
+            <span class="task-no-large">{{ detail.task.taskNo }}</span>
+            <el-tag :type="statusType(detail.task.taskStatus)" size="large" effect="dark">
+              {{ statusText(detail.task.taskStatus) }}
+            </el-tag>
+            <span v-if="detail.task.submitCount > 0" class="submit-count-badge">
+              第 {{ detail.task.submitCount }} 次提交
+            </span>
+          </div>
+          <div class="status-right">
+            <span class="created-time">发起于：{{ formatTime(detail.task.createTime) }}</span>
+          </div>
+        </div>
+
+        <!-- 驳回说明 -->
+        <el-alert
+          v-if="detail.task.rejectReason && detail.task.taskStatus === 'rejected'"
+          :title="`最近驳回原因：${detail.task.rejectReason}`"
+          type="warning"
+          show-icon
+          :closable="false"
+          class="mb-4"
+        />
+
+        <!-- Tab 切换 -->
+        <el-tabs v-model="activeDetailTab" class="detail-tabs">
+          <!-- 1. 候选人档案与动态信息 -->
+          <el-tab-pane label="候选人信息" name="profile">
+            <el-card shadow="never" class="mb-4 border-card">
+              <template #header>
+                <div class="card-header-flex">
+                  <span class="font-bold">基本个人档案</span>
+                  <el-tag size="small" type="info">固定信息</el-tag>
+                </div>
+              </template>
+              <el-descriptions v-if="detail.employeeInfo" :column="2" border>
+                <el-descriptions-item label="姓名">
+                  <span class="font-bold text-primary">{{ detail.employeeInfo.employeeName }}</span>
+                </el-descriptions-item>
+                <el-descriptions-item label="性别">{{ detail.employeeInfo.gender || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="手机号码">{{ detail.employeeInfo.phone }}</el-descriptions-item>
+                <el-descriptions-item label="身份证号码">{{ detail.employeeInfo.idCardNumber }}</el-descriptions-item>
+                <el-descriptions-item label="毕业院校">{{ detail.employeeInfo.college || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="学历 / 专业">
+                  {{ detail.employeeInfo.education || '-' }} / {{ detail.employeeInfo.major || '-' }}
+                </el-descriptions-item>
+                <el-descriptions-item label="现居地址" :span="2">
+                  {{ detail.employeeInfo.contactAddress || '-' }}
+                </el-descriptions-item>
+              </el-descriptions>
+              <el-empty v-else description="候选人尚未提交基础档案" :image-size="80" />
+            </el-card>
+
+            <!-- 动态填写字段 -->
+            <el-card shadow="never" class="border-card">
+              <template #header>
+                <div class="card-header-flex">
+                  <span class="font-bold">岗位补充登记信息</span>
+                  <el-tag size="small" type="info">动态字段</el-tag>
+                </div>
+              </template>
+              <el-descriptions v-if="detail.formValues && detail.formValues.length" :column="2" border>
+                <el-descriptions-item
+                  v-for="item in detail.formValues"
+                  :key="item.id"
+                  :label="item.fieldName || item.fieldCode"
+                >
+                  {{ item.fieldValue || '-' }}
+                </el-descriptions-item>
+              </el-descriptions>
+              <el-empty v-else description="暂无岗位补充字段或未填写" :image-size="80" />
+            </el-card>
+          </el-tab-pane>
+
+          <!-- 2. 证件与材料复核画廊 -->
+          <el-tab-pane label="证件与材料复核" name="materials">
+            <el-empty v-if="!detail.materials || !detail.materials.length" description="候选人尚未上传任何材料" />
+            <div v-else class="materials-gallery">
+              <div
+                v-for="item in detail.materials"
+                :key="item.id"
+                class="material-gallery-item"
+                :class="{
+                  'border-pass': item.reviewStatus === 'passed',
+                  'border-reject': item.reviewStatus === 'need_supplement'
+                }"
+              >
+                <div class="material-img-wrapper">
+                  <el-image
+                    class="material-thumb"
+                    :src="fileDownloadUrl(item.fileId)"
+                    :preview-src-list="[fileDownloadUrl(item.fileId)]"
+                    fit="cover"
+                    preview-teleported
+                  >
+                    <template #error>
+                      <div class="material-thumb-placeholder">
+                        <el-icon :size="32"><Document /></el-icon>
+                        <span>文档文件</span>
+                      </div>
+                    </template>
+                  </el-image>
+                  <div class="material-overlay-status">
+                    <el-tag
+                      :type="item.reviewStatus === 'passed' ? 'success' : item.reviewStatus === 'need_supplement' ? 'danger' : 'warning'"
+                      size="small"
+                    >
+                      {{ item.reviewStatus === 'passed' ? '审核合格' : item.reviewStatus === 'need_supplement' ? '需补充' : '待复核' }}
+                    </el-tag>
+                  </div>
+                </div>
+
+                <div class="material-info-box">
+                  <div class="material-name font-bold">{{ item.materialName }}</div>
+                  <div v-if="item.reviewRemark" class="material-reject-tip">
+                    理由：{{ item.reviewRemark }}
+                  </div>
+
+                  <div class="material-actions-flex">
+                    <el-button link type="primary" size="small" icon="Download" @click="download(item.fileId)">
+                      原件下载
+                    </el-button>
+
+                    <div v-if="detail.task.taskStatus === 'reviewing'" class="review-btn-group">
+                      <el-button
+                        size="small"
+                        type="success"
+                        plain
+                        :disabled="item.reviewStatus === 'passed'"
+                        @click="reviewMaterial(item.id, 'passed')"
+                      >
+                        合格
+                      </el-button>
+                      <el-button
+                        size="small"
+                        type="danger"
+                        plain
+                        :disabled="item.reviewStatus === 'need_supplement'"
+                        @click="reviewMaterial(item.id, 'need_supplement')"
+                      >
+                        需补充
+                      </el-button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </el-tab-pane>
+
+          <!-- 3. 合同管理与归档 -->
+          <el-tab-pane label="入职合同列表" name="contracts">
+            <el-empty v-if="!detail.contracts || !detail.contracts.length" description="暂无关联合同" />
+            <div v-else class="contracts-panel">
+              <div v-for="item in detail.contracts" :key="item.id" class="contract-card-item">
+                <div class="contract-left">
+                  <div class="contract-title font-bold">{{ item.contractName }}</div>
+                  <div class="contract-sub-meta">
+                    <el-tag size="small" type="info">{{ item.contractType || '劳动合同' }}</el-tag>
+                    <span v-if="item.confirmedAt" class="confirmed-text text-success">
+                      ✓ 候选人已于 {{ formatTime(item.confirmedAt) }} 确认
+                    </span>
+                    <span v-else class="text-secondary">未确认</span>
+                  </div>
+                </div>
+                <div class="contract-right">
+                  <el-button
+                    v-if="!item.generatedDocxFileId"
+                    type="primary"
+                    plain
+                    size="small"
+                    icon="DocumentChecked"
+                    @click="generate(item.id)"
+                  >
+                    生成DOCX合同
+                  </el-button>
+                  <el-button
+                    v-else
+                    type="success"
+                    plain
+                    size="small"
+                    icon="Download"
+                    @click="download(item.generatedDocxFileId)"
+                  >
+                    下载已生成DOCX
+                  </el-button>
+                </div>
+              </div>
+            </div>
+          </el-tab-pane>
+
+          <!-- 4. 审核流转时间轴 -->
+          <el-tab-pane label="流转记录与操作日志" name="audits">
+            <el-empty v-if="!detail.audits || !detail.audits.length" description="暂无审核操作记录" />
+            <div v-else class="timeline-container">
+              <el-timeline>
+                <el-timeline-item
+                  v-for="item in detail.audits"
+                  :key="item.id"
+                  :type="auditActionType(item.auditAction)"
+                  :timestamp="formatTime(item.auditedAt)"
+                  placement="top"
+                >
+                  <div class="audit-item-box">
+                    <div class="audit-action-title font-bold">
+                      {{ auditActionText(item.auditAction) }}
+                      <span v-if="item.createUser" class="audit-user">（操作人：{{ item.createUser }}）</span>
+                    </div>
+                    <div v-if="item.auditOpinion" class="audit-opinion-text">
+                      审核意见：{{ item.auditOpinion }}
+                    </div>
+                  </div>
+                </el-timeline-item>
+              </el-timeline>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+
+      <!-- 抽屉底部操作栏 -->
+      <template #footer>
+        <div v-if="detail" class="drawer-footer-actions">
+          <div class="drawer-footer-left">
+            <el-button
+              v-if="['pending_fill', 'rejected'].includes(detail.task.taskStatus)"
+              plain
+              type="primary"
+              icon="Setting"
+              @click="openContractVariables(detail.task)"
+            >
+              配置合同参数
+            </el-button>
+          </div>
+          <div class="drawer-footer-right">
+            <el-button
+              v-if="detail.task.taskStatus === 'reviewing'"
+              type="danger"
+              icon="Close"
+              @click="reject(detail.task)"
+            >
+              退回修改
+            </el-button>
+            <el-button
+              v-if="detail.task.taskStatus === 'reviewing'"
+              type="success"
+              icon="Check"
+              @click="approve(detail.task)"
+            >
+              审核通过并建档
+            </el-button>
+            <el-button
+              v-if="detail.task.taskStatus === 'approved'"
+              type="info"
+              icon="FolderChecked"
+              @click="archive(detail.task)"
+            >
+              归档该任务
+            </el-button>
+            <el-button @click="detailVisible = false">关闭</el-button>
+          </div>
+        </div>
+      </template>
+    </el-drawer>
+
+    <!-- 合同参数弹窗 -->
+    <el-dialog
+      v-model="contractVariablesVisible"
+      :title="`${contractVariableTask?.taskNo || ''} · 合同参数录入`"
+      width="920px"
+      destroy-on-close
+    >
+      <el-alert
+        title="请填写薪资、补贴等可编辑人事变量，填写完成后即可发送给候选人。员工与系统参数由系统自动生成替换。"
+        type="info"
+        show-icon
+        :closable="false"
+        class="mb-4"
+      />
+
+      <el-empty v-if="!contractVariableGroups.length" description="当前任务合同无需配置人事变量" />
+
+      <el-card
+        v-for="group in contractVariableGroups"
+        :key="group.taskContractId"
+        :header="group.contractName"
+        shadow="never"
+        class="contract-card mb-4"
+      >
+        <el-table :data="group.variables" border stripe>
+          <el-table-column prop="variableCode" label="变量编码" width="160" />
+          <el-table-column prop="variableName" label="变量名称" width="160" />
+          <el-table-column prop="variableType" label="类型" width="100">
+            <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 label="参数设定值" min-width="260">
+            <template #default="scope">
+              <el-input
+                v-if="scope.row.editable"
+                v-model="scope.row.variableValue"
+                :placeholder="scope.row.required ? '必填人事参数' : '可选参数'"
+                clearable
+              />
+              <span v-else class="text-secondary">
+                {{ scope.row.variableValue || "自动带入" }}
+              </span>
+            </template>
+          </el-table-column>
+          <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>
+
+        <div class="card-actions">
+          <el-button type="primary" icon="Check" @click="saveContractVariables(group)">
+            保存《{{ group.contractName }}》参数
+          </el-button>
+        </div>
+      </el-card>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts" name="onboardingTask">
+import { ref, reactive, onMounted } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import {
+  DocumentAdd,
+  Clock,
+  WarningFilled,
+  CircleCheckFilled,
+  Plus,
+  View,
+  Setting,
+  Check,
+  Close,
+  FolderChecked,
+  Delete,
+  CopyDocument,
+  ChatDotRound,
+  Document,
+  DocumentChecked,
+  Download
+} from "@element-plus/icons-vue";
+import {
+  onboardingTaskApi,
+  type OnboardingCompanyOption,
+  type OnboardingPositionOption,
+  type OnboardingTask,
+  type OnboardingTaskContractVariableGroup
+} from "@/api/modules/biz/onboarding";
+import type { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
+
+const proTable = ref<ProTableInstance>();
+
+const companies = ref<OnboardingCompanyOption[]>([]);
+const positions = ref<OnboardingPositionOption[]>([]);
+
+const createVisible = ref(false);
+const creating = ref(false);
+const shareVisible = ref(false);
+const createdTaskInfo = ref<any>(null);
+
+const detailVisible = ref(false);
+const activeDetailTab = ref("profile");
+const detail = ref<any>();
+
+const contractVariablesVisible = ref(false);
+const contractVariableTask = ref<OnboardingTask>();
+const contractVariableGroups = ref<OnboardingTaskContractVariableGroup[]>([]);
+
+// 统计数量
+const statusCounts = reactive({
+  pending_fill: 0,
+  reviewing: 0,
+  rejected: 0,
+  approved: 0
+});
+
+const form = reactive({
+  companyId: undefined as number | undefined,
+  positionId: undefined as number | undefined,
+  remark: ""
+});
+
+const columns: ColumnProps<OnboardingTask>[] = [
+  {
+    prop: "taskNo",
+    label: "任务编号",
+    minWidth: 200,
+    search: { el: "input" }
+  },
+  {
+    prop: "taskStatus",
+    label: "当前状态",
+    minWidth: 140,
+    align: "center",
+    enum: [
+      { label: "待填写", value: "pending_fill" },
+      { label: "审核中", value: "reviewing" },
+      { label: "已退回", value: "rejected" },
+      { label: "已通过", value: "approved" },
+      { label: "已归档", value: "archived" }
+    ],
+    search: {
+      el: "select"
+    }
+  },
+  {
+    prop: "submitCount",
+    label: "提交次数",
+    minWidth: 110,
+    align: "center"
+  },
+  {
+    prop: "linkExpireAt",
+    label: "链接到期时间",
+    minWidth: 180,
+    render: scope => formatTime(scope.row.linkExpireAt)
+  },
+  {
+    prop: "createTime",
+    label: "创建时间",
+    minWidth: 180,
+    render: scope => formatTime(scope.row.createTime)
+  },
+  {
+    prop: "operation",
+    label: "操作",
+    fixed: "right",
+    width: 320
+  }
+];
+
+const texts: Record<string, string> = {
+  pending_fill: "待候选人填写",
+  reviewing: "待人事审核",
+  rejected: "已退回修改",
+  approved: "已通过 / 待归档",
+  archived: "已归档",
+  revoked: "已撤销"
+};
+
+const statusText = (status: string) => texts[status] || status;
+
+type EpTagType = "success" | "warning" | "info" | "primary" | "danger";
+
+const statusType = (status: string): EpTagType =>
+  status === "approved"
+    ? "success"
+    : status === "rejected"
+      ? "danger"
+      : status === "reviewing"
+        ? "warning"
+        : status === "archived"
+          ? "info"
+          : "primary";
+
+const variableTypeTag = (type: string): EpTagType => {
+  const map: Record<string, EpTagType> = {
+    employee: "primary",
+    company: "success",
+    contract: "warning",
+    system: "info"
+  };
+  return map[type] || "info";
+};
+
+const variableTypeText = (type: string) => {
+  const map: Record<string, string> = {
+    employee: "员工变量",
+    company: "公司变量",
+    contract: "合同人事参数",
+    system: "系统变量"
+  };
+  return map[type] || type;
+};
+
+const auditActionType = (action: string): EpTagType => {
+  const map: Record<string, EpTagType> = {
+    submit: "primary",
+    approve: "success",
+    reject: "danger",
+    archive: "info",
+    revoke: "danger"
+  };
+  return map[action] || "primary";
+};
+
+const auditActionText = (action: string) => {
+  const map: Record<string, string> = {
+    submit: "候选人提交入职资料",
+    approve: "人事审核通过并创建正式员工",
+    reject: "人事驳回退回材料",
+    archive: "人事完成归档",
+    revoke: "人事撤销任务"
+  };
+  return map[action] || action;
+};
+
+const formatTime = (timeStr?: string) => {
+  if (!timeStr) return "-";
+  return timeStr.replace("T", " ").substring(0, 19);
+};
+
+const fileDownloadUrl = (fileId: number) => {
+  return `/api/sys/dev/file/download?id=${fileId}`;
+};
+
+// 列表查询并统计
+async function getTableData(params: any) {
+  const res = await onboardingTaskApi.page(params);
+  // 简要统计当前页状态
+  if (res.data?.list) {
+    const list = res.data.list;
+    statusCounts.pending_fill = list.filter((x: any) => x.taskStatus === "pending_fill").length;
+    statusCounts.reviewing = list.filter((x: any) => x.taskStatus === "reviewing").length;
+    statusCounts.rejected = list.filter((x: any) => x.taskStatus === "rejected").length;
+    statusCounts.approved = list.filter((x: any) => x.taskStatus === "approved" || x.taskStatus === "archived").length;
+  }
+  return res;
+}
+
+async function loadCompanies() {
+  const { data } = await onboardingTaskApi.listCompanies();
+  companies.value = data;
+}
+
+async function onCompanyChange(companyId: number) {
+  form.positionId = undefined;
+  const { data } = await onboardingTaskApi.listPositions(companyId);
+  positions.value = data;
+}
+
+function openCreate() {
+  Object.assign(form, { companyId: undefined, positionId: undefined, remark: "" });
+  positions.value = [];
+  createVisible.value = true;
+}
+
+async function createTask() {
+  if (!form.companyId || !form.positionId) {
+    return ElMessage.warning("请选择所属公司和入职岗位");
+  }
+
+  creating.value = true;
+  try {
+    const { data: result }: any = await onboardingTaskApi.create(form);
+    createVisible.value = false;
+    proTable.value?.refresh();
+
+    const linkUrl = `${location.origin}/onboarding/fill?token=${result.linkToken}`;
+    const selectedCompany = companies.value.find(c => c.id === form.companyId)?.companyName || "";
+    const selectedPosition = positions.value.find(p => p.id === form.positionId)?.positionName || "";
+
+    createdTaskInfo.value = {
+      taskNo: result.taskNo || "已生成",
+      linkUrl,
+      expiresAt: result.expiresAt,
+      companyName: selectedCompany,
+      positionName: selectedPosition
+    };
+    shareVisible.value = true;
+  } catch (err: any) {
+    ElMessage.error(err?.message || "创建任务失败");
+  } finally {
+    creating.value = false;
+  }
+}
+
+function copyText(text?: string, successMsg = "复制成功") {
+  if (!text) return;
+  navigator.clipboard.writeText(text);
+  ElMessage.success(successMsg);
+}
+
+function copyInviteMessage() {
+  if (!createdTaskInfo.value) return;
+  const msg = `【入职邀请】您好！欢迎加入${createdTaskInfo.value.companyName}，担任${createdTaskInfo.value.positionName}一职。请点击以下链接完成您的入职登记与合同确认：${createdTaskInfo.value.linkUrl} （链接有效期至：${createdTaskInfo.value.expiresAt}）`;
+  copyText(msg, "邀请文案已复制至剪贴板");
+}
+
+async function showDetail(row: OnboardingTask) {
+  const { data } = await onboardingTaskApi.detail({ id: row.id });
+  detail.value = data;
+  activeDetailTab.value = "profile";
+  detailVisible.value = true;
+}
+
+async function openContractVariables(row: OnboardingTask) {
+  const { data } = await onboardingTaskApi.taskContractVariables(row.id);
+  contractVariableTask.value = row;
+  contractVariableGroups.value = data;
+  contractVariablesVisible.value = true;
+}
+
+async function saveContractVariables(group: OnboardingTaskContractVariableGroup) {
+  const requiredBlank = group.variables.some(
+    item => item.editable && item.required && !item.variableValue?.trim()
+  );
+
+  if (requiredBlank) {
+    return ElMessage.warning("请填写所有必填合同人事参数");
+  }
+
+  await onboardingTaskApi.saveTaskContractVariables({
+    taskContractId: group.taskContractId,
+    values: group.variables
+      .filter(item => item.editable)
+      .map(item => ({ id: item.id, variableValue: item.variableValue }))
+  });
+
+  ElMessage.success("《" + group.contractName + "》参数已保存");
+}
+
+async function approve(row: OnboardingTask) {
+  await ElMessageBox.confirm(
+    "确认审核通过？系统将自动创建正式员工档案并锁定合同快照。",
+    "审核通过确认",
+    { type: "success", confirmButtonText: "审核通过", cancelButtonText: "取消" }
+  );
+
+  await onboardingTaskApi.approve({ taskId: row.id });
+  ElMessage.success("审核通过，已成功建档！");
+  detailVisible.value = false;
+  proTable.value?.refresh();
+}
+
+async function reject(row: OnboardingTask) {
+  const { value } = await ElMessageBox.prompt(
+    "请输入退回补充说明（将展示给候选人查看）：",
+    "退回入职任务",
+    { inputPattern: /\S+/, inputErrorMessage: "退回原因不能为空", confirmButtonText: "确认退回", type: "warning" }
+  );
+
+  await onboardingTaskApi.reject({ taskId: row.id, auditOpinion: value });
+  ElMessage.warning("已退回修改，候选人可重新补录");
+  detailVisible.value = false;
+  proTable.value?.refresh();
+}
+
+async function generate(taskContractId: number) {
+  await onboardingTaskApi.generateContract(taskContractId);
+  ElMessage.success("DOCX合同文件已生成");
+  if (detail.value?.task?.id) {
+    await showDetail(detail.value.task);
+  }
+}
+
+function download(fileId: number) {
+  window.open(fileDownloadUrl(fileId), "_blank");
+}
+
+async function reviewMaterial(taskMaterialId: number, reviewStatus: string) {
+  let reviewRemark = "";
+  if (reviewStatus === "need_supplement") {
+    const result = await ElMessageBox.prompt("请输入该材料退回补充说明：", "材料不合格退回", {
+      inputPattern: /\S+/,
+      inputErrorMessage: "请填写说明"
+    });
+    reviewRemark = result.value;
+  }
+
+  await onboardingTaskApi.reviewMaterial({ taskMaterialId, reviewStatus, reviewRemark });
+  ElMessage.success(reviewStatus === "passed" ? "该材料已标记为合格" : "已标记需补充");
+
+  if (detail.value?.task) {
+    await showDetail(detail.value.task);
+  }
+}
+
+async function archive(row: OnboardingTask) {
+  await ElMessageBox.confirm("确认归档该入职任务？", "归档任务", { type: "info" });
+  await onboardingTaskApi.archive({ taskId: row.id });
+  ElMessage.success("任务已归档");
+  detailVisible.value = false;
+  proTable.value?.refresh();
+}
+
+async function revoke(row: OnboardingTask) {
+  await ElMessageBox.confirm(
+    "撤销后候选人填写链接将立即失效，确定继续撤销吗？",
+    "撤销任务",
+    { type: "error", confirmButtonText: "确定撤销", cancelButtonText: "取消" }
+  );
+  await onboardingTaskApi.revoke({ taskId: row.id });
+  ElMessage.success("任务已撤销");
+  detailVisible.value = false;
+  proTable.value?.refresh();
+}
+
+onMounted(loadCompanies);
+</script>
+
+<style scoped>
+.task-page-box {
+  display: flex !important;
+  flex-direction: column !important;
+  height: 100% !important;
+  width: 100% !important;
+  box-sizing: border-box;
+  padding: 0 !important;
+  background: transparent !important;
+  overflow: hidden;
+}
+
+.task-metrics {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 14px;
+  margin-bottom: 12px;
+  flex-shrink: 0;
+  width: 100%;
+}
+
+.metric-card {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 12px 18px;
+  border-radius: 8px;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+}
+
+.metric-card.bg-blue {
+  border-left: 4px solid #2563eb;
+}
+.metric-card.bg-blue .metric-icon {
+  color: #2563eb;
+  background: #eff6ff;
+}
+
+.metric-card.bg-orange {
+  border-left: 4px solid #f59e0b;
+}
+.metric-card.bg-orange .metric-icon {
+  color: #f59e0b;
+  background: #fffbeb;
+}
+
+.metric-card.bg-red {
+  border-left: 4px solid #ef4444;
+}
+.metric-card.bg-red .metric-icon {
+  color: #ef4444;
+  background: #fef2f2;
+}
+
+.metric-card.bg-green {
+  border-left: 4px solid #10b981;
+}
+.metric-card.bg-green .metric-icon {
+  color: #10b981;
+  background: #ecfdf5;
+}
+
+.metric-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  flex-shrink: 0;
+}
+
+.metric-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.metric-title {
+  font-size: 13px;
+  color: #64748b;
+}
+
+.metric-value {
+  font-size: 20px;
+  font-weight: 700;
+  color: #0f172a;
+  line-height: 1.2;
+}
+
+.table-box-flex {
+  flex: 1;
+  height: 0;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.table-box-flex :deep(.table-search) {
+  margin-bottom: 12px !important;
+  border-radius: 8px;
+}
+
+.table-box-flex :deep(.table-main) {
+  border-radius: 8px;
+}
+
+.full-width {
+  width: 100%;
+}
+
+/* 分享弹窗 */
+.share-dialog-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.share-link-row,
+.share-text-box {
+  margin-top: 8px;
+}
+
+.share-text-area {
+  margin-bottom: 8px;
+}
+
+.share-copy-btn {
+  width: 100%;
+}
+
+/* 详情抽屉 */
+.drawer-container {
+  padding: 0 4px;
+}
+
+.drawer-header-summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px 20px;
+  margin-bottom: 16px;
+}
+
+.header-left-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.task-no-large {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.header-meta-items {
+  display: flex;
+  gap: 16px;
+  font-size: 13px;
+  color: #64748b;
+}
+
+.detail-tabs {
+  margin-top: 8px;
+}
+
+.border-card {
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+}
+
+.card-header-flex {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.font-bold {
+  font-weight: 600;
+}
+
+.text-primary {
+  color: #2563eb;
+}
+
+.text-secondary {
+  color: #64748b;
+}
+
+.materials-gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 16px;
+}
+
+.material-gallery-item {
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 12px;
+  background: #f8fafc;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.border-pass {
+  border-color: #10b981;
+  background: #f0fdf4;
+}
+
+.border-reject {
+  border-color: #ef4444;
+  background: #fef2f2;
+}
+
+.gallery-preview-box {
+  width: 100%;
+  height: 140px;
+  background: #e2e8f0;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.gallery-thumb-image {
+  width: 100%;
+  height: 100%;
+}
+
+.file-type-preview {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  color: #64748b;
+}
+
+.gallery-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.gallery-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.material-title {
+  font-size: 14px;
+}
+
+.material-reject-reason {
+  font-size: 12px;
+  color: #dc2626;
+  background: #fee2e2;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.gallery-actions {
+  display: flex;
+  gap: 6px;
+  margin-top: 4px;
+}
+
+.contracts-list {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.contract-audit-item {
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.variables-edit-area {
+  margin-top: 10px;
+}
+
+.drawer-footer-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.footer-action-right {
+  display: flex;
+  gap: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/onboarding/fill/index.vue b/src/views/onboarding/fill/index.vue
new file mode 100644
index 0000000..84299cf
--- /dev/null
+++ b/src/views/onboarding/fill/index.vue
@@ -0,0 +1,1126 @@
+<template>
+  <main class="fill-page" v-loading="loading">
+    <!-- 顶部品牌横幅 -->
+    <header class="brand-header">
+      <div class="brand-content">
+        <div class="brand-badge">
+          <el-icon><Promotion /></el-icon>
+          <span>OnboardX 智能入职系统</span>
+        </div>
+        <h1 class="brand-title">欢迎加入我们</h1>
+        <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>
+        </template>
+      </el-result>
+
+      <template v-else-if="task">
+        <!-- 任务状态提示条 -->
+        <div class="status-banner" :class="task.taskStatus">
+          <div class="status-info">
+            <span class="task-no">任务编号：{{ task.taskNo }}</span>
+            <el-tag :type="statusTagType(task.taskStatus)" size="small" effect="dark">
+              {{ statusText(task.taskStatus) }}
+            </el-tag>
+          </div>
+          <div v-if="task.linkExpireAt" class="expire-time">
+            链接有效期至：{{ formatDateTime(task.linkExpireAt) }}
+          </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 v-if="!canEdit" class="readonly-banner">
+            <el-alert
+              title="当前为只读查阅模式（资料已提交审核）"
+              type="info"
+              show-icon
+              :closable="false"
+            />
+          </div>
+
+          <!-- 步骤导航条 -->
+          <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="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>
+            </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="12">
+                  <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">
+                  <el-form-item label="通讯地址" prop="contactAddress">
+                    <el-input
+                      v-model="form.contactAddress"
+                      type="textarea"
+                      :rows="3"
+                      placeholder="请输入详细现居/通讯地址"
+                      :disabled="!canEdit"
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+
+          <!-- 步骤 2: 动态补充信息 -->
+          <div v-show="activeStepKey === 'dynamic'" class="step-content">
+            <div class="section-header">
+              <h3 class="section-title">补充岗位信息</h3>
+              <p class="section-desc">请根据公司与岗位要求完善以下必要登记项</p>
+            </div>
+
+            <el-form label-position="top">
+              <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-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="请输入"
+                      :disabled="!canEdit"
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+
+          <!-- 步骤 3: 证件与材料上传 -->
+          <div v-show="activeStepKey === 'materials'" class="step-content">
+            <div class="section-header">
+              <h3 class="section-title">证件与入职材料上传</h3>
+              <p class="section-desc">支持清晰拍照或扫描件（JPG/PNG/PDF），确保证件四角完整、文字清晰可见</p>
+            </div>
+
+            <div class="material-grid">
+              <div
+                v-for="item in materialRequirements"
+                :key="item.materialTypeId"
+                class="material-card"
+                :class="{
+                  'has-uploaded': getUploadedMaterial(item.materialTypeId),
+                  'is-rejected': isMaterialRejected(item.materialTypeId)
+                }"
+              >
+                <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>
+                    <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>
+                </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"
+                        :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
+                      v-if="canEdit"
+                      class="custom-uploader"
+                      :action="uploadUrl(item.materialTypeId)"
+                      :show-file-list="false"
+                      :on-success="onUploadSuccess"
+                      :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>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 步骤 4: 合同查阅与签署确认 -->
+          <div v-show="activeStepKey === 'contracts'" class="step-content">
+            <div class="section-header">
+              <h3 class="section-title">入职合同查阅与确认</h3>
+              <p class="section-desc">请认真阅读下列待签署合同及协议全文，确认无误后勾选确认</p>
+            </div>
+
+            <el-empty v-if="!contracts.length" description="暂无需要确认的合同" />
+
+            <div v-else class="contract-list">
+              <div
+                v-for="item in contracts"
+                :key="item.id"
+                class="contract-card"
+                :class="{ 'is-confirmed': confirmed[item.id] }"
+              >
+                <div class="contract-header">
+                  <div class="contract-info">
+                    <h4 class="contract-name">{{ item.contractName }}</h4>
+                    <span class="contract-type-badge">{{ item.contractType || '劳动合同' }}</span>
+                  </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>
+
+                    <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>
+                </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>
+      </template>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts" name="onboardingFill">
+import { ref, reactive, computed, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { ElMessage, ElMessageBox, type FormInstance, type 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";
+
+const route = useRoute();
+const token = String(route.query.token || "");
+
+const loading = ref(false);
+const submitting = ref(false);
+const error = ref("");
+const showEditView = ref(false);
+
+const task = ref<any>();
+const contracts = ref<any[]>([]);
+const formFields = ref<any[]>([]);
+const materialRequirements = ref<any[]>([]);
+const uploadedMaterials = ref<any[]>([]);
+
+const confirmed = reactive<Record<number, boolean>>({});
+const dynamicValues = reactive<Record<number, any>>({});
+const dynamicErrors = reactive<Record<number, string>>({});
+
+const baseFormRef = ref<FormInstance>();
+const form = reactive({
+  employeeName: "",
+  phone: "",
+  idCardNumber: "",
+  gender: "",
+  contactAddress: ""
+});
+
+const baseRules: 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"
+    }
+  ]
+};
+
+// 步骤配置与计算
+const stepKeys = computed(() => {
+  const keys = ["base"];
+  if (formFields.value.length) keys.push("dynamic");
+  keys.push("materials", "contracts");
+  return keys;
+});
+
+const currentStepIndex = ref(0);
+const totalSteps = computed(() => stepKeys.value.length);
+const activeStepKey = computed(() => stepKeys.value[currentStepIndex.value]);
+const currentStep = computed(() => currentStepIndex.value);
+
+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 [];
+  }
+};
+
+async function load() {
+  if (!token) {
+    error.value = "缺少有效入职凭证，请联系人事获取正确链接";
+    return;
+  }
+
+  loading.value = true;
+  error.value = "";
+
+  try {
+    const { data }: any = await onboardingPublicApi.detail(token);
+    task.value = data.task;
+    contracts.value = data.contracts || [];
+    formFields.value = data.formFields || [];
+    materialRequirements.value = data.materialRequirements || [];
+    uploadedMaterials.value = data.materials || [];
+
+    if (data.employeeInfo) {
+      Object.assign(form, data.employeeInfo);
+    }
+
+    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 || "入职链接已失效或无法访问";
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 步骤切换与校验
+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;
+    }
+  } 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;
+      }
+    }
+    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;
+    }
+  }
+
+  if (currentStepIndex.value < totalSteps.value - 1) {
+    currentStepIndex.value++;
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }
+}
+
+function prevStep() {
+  if (currentStepIndex.value > 0) {
+    currentStepIndex.value--;
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }
+}
+
+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 || "草稿保存失败");
+  }
+}
+
+async function confirm(taskContractId: number, checked: boolean | string | number) {
+  if (checked !== true) {
+    confirmed[taskContractId] = true;
+    return;
+  }
+  try {
+    await onboardingPublicApi.confirmContract({ token, taskContractId });
+    confirmed[taskContractId] = true;
+    ElMessage.success("已确认阅读并同意该合同条款");
+  } catch (err: any) {
+    ElMessage.error(err?.message || "合同确认失败");
+  }
+}
+
+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;
+  }
+
+  await ElMessageBox.confirm(
+    "提交后入职信息将进入人事复核阶段，确认提交吗？",
+    "提交入职确认",
+    { confirmButtonText: "确认提交", cancelButtonText: "再检查一下", type: "info" }
+  );
+
+  submitting.value = true;
+  try {
+    await saveDraft();
+    await onboardingPublicApi.submit(token);
+    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() {
+  ElMessage.success("材料上传成功");
+  load();
+}
+
+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;
+}
+
+/* 顶部品牌背景 */
+.brand-header {
+  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
+  color: #fff;
+  padding: 36px 20px 60px;
+  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;
+  border-radius: 20px;
+  font-size: 13px;
+  margin-bottom: 12px;
+}
+
+.brand-title {
+  font-size: 26px;
+  font-weight: 700;
+  margin: 0 0 8px;
+}
+
+.brand-subtitle {
+  font-size: 14px;
+  opacity: 0.9;
+  margin: 0;
+}
+
+/* 主容器 */
+.main-container {
+  max-width: 760px;
+  margin: -36px 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);
+  margin-bottom: 16px;
+}
+
+.status-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.task-no {
+  font-size: 14px;
+  font-weight: 600;
+  color: #334155;
+}
+
+.expire-time {
+  font-size: 12px;
+  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;
+  padding: 24px;
+  box-shadow: 0 4px 20px 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;
+}
+
+.step-content {
+  min-height: 280px;
+}
+
+.section-header {
+  margin-bottom: 20px;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0 0 6px;
+}
+
+.section-desc {
+  font-size: 13px;
+  color: #64748b;
+  margin: 0;
+}
+
+.full-width {
+  width: 100%;
+}
+
+/* 证件材料网格 */
+.material-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.material-card {
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  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;
+  margin-bottom: 12px;
+}
+
+.material-title-box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.material-name {
+  font-weight: 600;
+  font-size: 14px;
+  color: #1e293b;
+}
+
+.reject-remark {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: #fee2e2;
+  color: #b91c1c;
+  font-size: 12px;
+  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;
+}
+
+.contract-tip {
+  font-size: 13px;
+  color: #64748b;
+  margin: 0 0 16px;
+}
+
+.contract-action-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  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;
+}
+
+.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