feat(首页): 流程步骤少于7个时平均分布

当只有一屏且步骤数少于7个时，使用 space-evenly 让步骤平均分布到整个屏幕宽度，而不是用占位符填充。

- 新增 shouldDistributeEvenly 计算属性判断是否需要平均分布
- 模板绑定动态 class 实现样式切换
- 添加 distribute-evenly 样式类

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

@@ -47,6 +47,7 @@
               <!-- 单页步骤容器：宽度占满一屏，Scroll Snap对齐 -->
               <!-- 单页步骤容器：宽度占满一屏，Scroll Snap对齐 -->
               <div
               <div
                 class="process-steps"
                 class="process-steps"
+                :class="{ 'distribute-evenly': shouldDistributeEvenly }"
                 v-for="(page, pindex) in stepPages"
                 v-for="(page, pindex) in stepPages"
                 :key="pindex"
                 :key="pindex"
               >
               >
@@ -275,6 +276,17 @@ const stepPages = computed(() => {
   return pages
   return pages
 })
 })
 
 
+/**
+ * 是否应该平均分布步骤
+ * 说明：当只有一屏且步骤数少于7个时，让步骤平均分布到整个屏幕宽度
+ * @returns {boolean} 是否平均分布
+ */
+const shouldDistributeEvenly = computed(() => {
+  const totalSteps = processSteps.value.length
+  const totalPages = stepPages.value.length
+  return totalPages === 1 && totalSteps < steps_per_page
+})
+
 // 获取当前选中的步骤
 // 获取当前选中的步骤
 const currentStep = computed(() => {
 const currentStep = computed(() => {
   return processSteps.value.find(step => step.active) || processSteps.value[0]
   return processSteps.value.find(step => step.active) || processSteps.value[0]
@@ -1151,6 +1163,16 @@ const handlePhotoClick = () => {
   gap: 0.5rem;
   gap: 0.5rem;
 }
 }
 
 
+/* 平均分布模式：当只有一屏且步骤数少于7个时 */
+.process-steps.distribute-evenly {
+  justify-content: space-evenly;
+}
+
+/* 平均分布时隐藏占位符，不占据空间 */
+.process-steps.distribute-evenly .process-step.placeholder {
+  display: none;
+}
+
 /* 流程步骤分页容器：横向滚动，每屏一页 */
 /* 流程步骤分页容器：横向滚动，每屏一页 */
 .process-steps-wrapper {
 .process-steps-wrapper {
   position: relative;
   position: relative;