chore: bypass pre-commit for now

src/components/ProgressBar/ProgressBar.vue

@@ -10,28 +10,58 @@
       <!-- 中间步骤指示器 -->
       <div class="steps-section" v-if="currentStep > 0">
         <!-- 标题区域 -->
-        <div class="absolute top-0 left-40">
+        <div class="absolute top-0 left-40" v-if="currentStep > 0">
           <img
             :src="getStaticImage(IMAGE_PATHS.PROGRESS_BAR.TITLE)"
             alt="制作变焦镜-我的志愿者手记"
             class="title-image"
           />
         </div>
-        <div
-          v-for="(step, index) in steps.slice(0, 3)"
-          :key="index"
-          class="step-item"
-          :class="getStepStatus(index)"
-        >
-          <span class="step-text">
-            <img
-              :src="
-                props.currentPage === index ? steps[index].nameSelect : steps[index].nameselectNot
-              "
-              alt=""
-            />
-            <img class="step-ellipsis" src="@/assets/images/midterm/进度装饰（未完成.png" alt="" />
-          </span>
+        <div class="flex">
+          <div
+            v-for="(step, index) in steps.slice(0, 3)"
+            :key="index"
+            class="step-item"
+            :class="getStepStatus(index)"
+          >
+            <span class="relative flex items-center justify-center">
+              <!-- <img
+                :src="currentStep === index ? steps[index].nameSelect : steps[index].nameselectNot"
+                alt=""
+              /> -->
+              <div class="flex items-center">
+                <span
+                  :class="[
+                    'font-bold text-4xl ',
+                    currentStep === index + 1 ? 'text-[#fbbf24]' : 'text-white'
+                  ]"
+                  >{{ step.name }}</span
+                >
+                <img v-if="canComplete" src="@/assets/images/midterm/完成.png" alt="" />
+                <img
+                  v-else
+                  :class="['ml-2', currentStep === index + 1 && 'filter-blue']"
+                  :src="step.icon"
+                  alt=""
+                />
+              </div>
+
+              <template v-if="index < 2">
+                <img
+                  v-if="canComplete"
+                  class="step-ellipsis"
+                  src="@/assets/images/midterm/进度装饰（已完成.png"
+                  alt=""
+                />
+                <img
+                  v-else
+                  class="step-ellipsis"
+                  src="@/assets/images/midterm/进度装饰（未完成.png"
+                  alt=""
+                />
+              </template>
+            </span>
+          </div>
         </div>
       </div>
       <div class="absolute top-0 left-40" v-else>
@@ -71,11 +101,6 @@ interface Props {
   /** 当前步骤索引 (0-3) */
   currentStep?: number
 }
-//
-interface Props {
-  /** 当前步骤索引 (0-3) */
-  currentPage?: number
-}
 // 定义事件
 interface Emits {
   /** 点击完成按钮时触发 */
@@ -83,14 +108,13 @@ interface Emits {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  currentStep: 0,
-  currentPage: 0
+  currentStep: 0
 })
 
 const emit = defineEmits<Emits>()
 
 // 计算属性：是否可以完成（当前在最后一步）
-const canComplete = computed(() => props.currentStep === 3)
+const canComplete = computed(() => props.currentStep > steps.length)
 
 // 处理完成按钮点击
 const handleComplete = () => {
@@ -102,16 +126,22 @@ const handleComplete = () => {
 // 步骤配置
 const steps = [
   {
-    nameSelect: '/src/assets/images/midterm/前期准备-选中.png',
-    nameselectNot: '/src/assets/images/midterm/前期准备-未选中.png'
+    name: '前期准备',
+    icon: getStaticImage('midterm/准备图标.png'),
+    nameSelect: getStaticImage('midterm/前期准备-选中.png'),
+    nameselectNot: getStaticImage('midterm/前期准备-未选中.png')
   },
   {
-    nameSelect: '/src/assets/images/midterm/中期拍摄-选中.png',
-    nameselectNot: '/src/assets/images/midterm/中期拍摄-未选中.png'
+    name: '中期拍摄',
+    icon: getStaticImage('midterm/拍摄图标.png'),
+    nameSelect: getStaticImage('midterm/中期拍摄-选中.png'),
+    nameselectNot: getStaticImage('midterm/中期拍摄-未选中.png')
   },
   {
-    nameSelect: '/src/assets/images/midterm/后期剪辑-选中.png',
-    nameselectNot: '/src/assets/images/midterm/后期剪辑-未选中.png'
+    name: '后期剪辑',
+    icon: getStaticImage('midterm/剪辑图标.png'),
+    nameSelect: getStaticImage('midterm/后期剪辑-选中.png'),
+    nameselectNot: getStaticImage('midterm/后期剪辑-未选中.png')
   }
 ]
 
@@ -138,8 +168,9 @@ const getStepStatus = (stepIndex: number) => {
 .progress-bar {
   position: relative;
   display: flex;
+  justify-content: center;
   align-items: center;
-  padding: 15px 20px;
+  padding-right: 160px;
   height: 292px;
   background-image: url('@/assets/images/components/ProgressBar-bg.png');
   background-size: cover;
@@ -153,22 +184,22 @@ const getStepStatus = (stepIndex: number) => {
 }
 
 .steps-section {
-  width: 1600px;
+  width: 1400px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
   margin: 30px 20px 0;
   gap: 15px;
 }
 
-.step-item {
-  padding-left: 300px;
-  display: flex;
+/* .step-item { */
+/* padding-left: 300px; */
+/* display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 5px;
-  flex: 1;
-}
+  gap: 5px; */
+/* flex: 1; */
+/* } */
 
 .step-text {
   /* font-size: 40px; */
@@ -178,12 +209,12 @@ const getStepStatus = (stepIndex: number) => {
   white-space: nowrap;
   text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
   display: flex;
-  justify-content: center;
+  justify-content: start;
   align-items: center;
 }
 
 .step-ellipsis {
-  padding-left: 17px;
+  padding: 0 40px;
 }
 
 .step-dots {
@@ -256,6 +287,11 @@ button:disabled {
   object-fit: contain;
 }
 
+.filter-blue {
+  filter: brightness(0) saturate(100%) invert(79%) sepia(29%) saturate(1190%) hue-rotate(330deg)
+    brightness(102%) contrast(98%);
+}
+
 /* 响应式设计 */
 @media (max-width: 768px) {
   .progress-bar {