前端界面步骤化引导的实现机制

字数

1586 字

阅读时间

7 分钟

一、核心思路

前端采用 Vue 3 的响应式数据 + 条件渲染（v-if / v-else） 来控制界面中各个功能区域的显示与隐藏。整个操作流程被划分为四个阶段，每个阶段只有在满足前置条件后，才会显示对应的操作按钮或面板。用户无法跳过未完成的步骤，从而形成自然的步骤化引导。

二、具体实现方式

2.1 状态变量定义（main.js）

在 Vue 的 setup() 中定义了以下关键响应式状态：

const sourcePreview = reactive({
  columns: [],      // 源数据的列名列表，非空表示源数据已加载
  sample: [],
  shape: [0, 0],
  dtypes: {}
});

const targetFieldsInfo = ref([]);   // 目标表单字段列表，非空表示目标表单已解析

const mappingPairs = ref([]);       // 映射对列表，非空表示已获取推荐映射

const fillResult = ref(null);       // 填充结果对象，非空表示填充已执行

2.2 条件渲染控制（index.html）

① 源数据加载区 – 始终可见

• 用户必须首先上传/填写源数据并点击“加载源数据”。

② 目标表单解析区 – 始终可见

• 用户必须输入目标 URL 并点击“解析目标表单”。

③ 字段映射区 – 条件显示

<div class="card" v-if="sourcePreview.columns.length && targetFieldsInfo.length">
  <!-- 只有源数据和目标表单都存在时才显示该区域 -->
</div>

• 只有当 sourcePreview.columns 非空 且 targetFieldsInfo 非空时，字段映射卡片才会出现。
• 这保证了用户在未完成前两步之前，无法看到映射配置界面。

④ “获取智能推荐映射”按钮 – 条件显示

<button v-if="mappingPairs.length === 0" @click="getRecommendation" ...>
  获取智能推荐映射
</button>

• 当 mappingPairs 为空（即尚未获取推荐映射）时，显示该按钮。
• 一旦用户点击并成功获取推荐（mappingPairs 被赋值），按钮自动消失。

⑤ 映射表格与“确认填充”按钮 – 条件显示

<div v-if="mappingPairs.length">
  <!-- 映射表格 -->
  <button @click="confirmFill" ...>确认填充到目标网页</button>
</div>

• 只有当 mappingPairs 非空（即已获取推荐映射）时，才显示映射表格和填充按钮。
• 用户可以在表格中手动调整映射，然后点击填充。

⑥ 结果导出区 – 条件显示

<div class="card" v-if="fillResult && fillResult.success">
  <h2>4️⃣ 导出结果</h2>
  ...
</div>

• 只有当填充已执行且成功（fillResult.success === true）时，才显示导出按钮。
• 避免了用户在未填充时误导出空数据。

2.3 按钮禁用状态辅助引导

除了通过 v-if 控制整块区域的显示，部分按钮还使用了 :disabled 属性防止在异步请求中重复点击：

<button @click="loadSourceData" :disabled="sourceLoading">
  {{ sourceLoading ? '加载中...' : '加载源数据' }}
</button>

这虽然不是步骤引导的核心，但配合请求中的 loading 状态，避免用户操作混乱。

三、步骤化流程示意图

用户访问页面
    │
    ▼
┌─────────────────────────────────────┐
│ 区域1：上传源数据（始终可见）        │
│ - 选择类型，上传文件/输入URL         │
│ - 点击“加载源数据”                   │
│ - 成功后显示数据预览                 │
└─────────────────────────────────────┘
    │
    ▼
┌─────────────────────────────────────┐
│ 区域2：目标表单URL（始终可见）       │
│ - 输入URL，点击“解析目标表单”        │
│ - 成功后显示字段列表                 │
└─────────────────────────────────────┘
    │
    │ (条件：sourcePreview.columns.length && targetFieldsInfo.length)
    ▼
┌─────────────────────────────────────┐
│ 区域3：字段映射（条件显示）          │
│   ├─ 按钮“获取智能推荐映射”          │
│   │   (条件：mappingPairs为空)       │
│   ├─ 映射表格 + “确认填充”按钮       │
│   │   (条件：mappingPairs非空)       │
│   └─ 填充结果提示                    │
└─────────────────────────────────────┘
    │
    │ (条件：fillResult && fillResult.success)
    ▼
┌─────────────────────────────────────┐
│ 区域4：导出结果（条件显示）          │
│   - 导出为Excel / CSV                │
└─────────────────────────────────────┘

四、为什么这样设计？

1. 降低认知负担：用户不需要阅读长篇说明，界面会根据当前进度自动呈现下一步可操作的元素。
2. 防止操作错误：无法在源数据或目标表单未准备的情况下进行字段映射或填充，避免了无效请求。
3. 自然的反馈：每完成一步，新的按钮或面板出现，用户会获得“任务推进”的心理正反馈。
4. 符合用户预期：从上到下、从左到右的线性流程，符合大多数Web表单类工具的交互习惯。

五、代码关键片段索引

• 条件显示映射卡片：index.html 第 85 行附近（v-if="sourcePreview.columns.length && targetFieldsInfo.length"）
• 推荐按钮的条件显示：index.html 第 94 行（v-if="mappingPairs.length === 0"）
• 映射表格与填充按钮的条件显示：index.html 第 97 行（v-if="mappingPairs.length"）
• 导出区域的条件显示：index.html 第 127 行（v-if="fillResult && fillResult.success"）

六、扩展思考（答辩备用）

问：如果用户先解析目标表单，再上传源数据，界面会怎样？
答：由于两个条件同时满足才会显示映射区，用户必须两者都完成。无论顺序如何，最终都能正确进入下一步。系统不强制上传顺序，只检查最终状态。

问：如果用户想重新上传源数据，之前获取的映射推荐还在吗？
答：在 loadSourceData 函数中，成功加载后会重置 mappingPairs.value = []，因此映射表格会重新隐藏，用户需要重新获取推荐。这保证了数据一致性。

问：步骤化引导是否依赖后端状态？
答：不依赖，完全由前端维护的响应式变量驱动。即使后端重启，只要前端不刷新页面，状态仍保留。但刷新页面后所有状态丢失，需要重新操作。

贡献者

freeway348

文件历史

最后编辑于 大约 19 小时前查看完整历史

6b0a0-paper