✨ feat: 解决方案详情页保存切换分类状态，返回时保持位置

 <!--
  * @Date: 2024-10-18 12:06:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-12-05 10:19:51
+ * @LastEditTime: 2024-12-05 16:08:07
  * @FilePath: /hager/src/views/solution/case.vue
  * @Description: 文件描述
 -->
@@ -157,7 +157,7 @@ export default {
   },
   computed: {
     casePath () {
-      return `/solution/detail?id=${this.success_info.category_id}`;
+      return `/solution/detail?id=${this.success_info.category_id}&current_index=${this.$route.query.current_index}`;
     }
   },
   watch: {

 <!--
  * @Date: 2024-09-29 15:49:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-12-05 13:30:26
+ * @LastEditTime: 2024-12-05 16:07:14
  * @FilePath: /hager/src/views/solution/detail.vue
  * @Description: 文件描述
 -->
@@ -18,7 +18,7 @@
     <hager-box v-if="case_list.length > 1">
       <div class="hager-solution-detail-nav">
         <div class="nav" v-for="(item, index) in case_list" :key="index">
-          <div @click="changeCase(item, index)" :class="[current_id === item.id ? 'current-nav' : '', 'detail-nav']">{{ item.category_name }}</div>
+          <div @click="changeCase(item, index)" :class="[current_id == item.id ? 'current-nav' : '', 'detail-nav']">{{ item.category_name }}</div>
         </div>
       </div>
     </hager-box>
@@ -206,6 +206,7 @@ export default {
       SuccessSlidesPerView: 4,
       productSlidesPerView: 4,
       case_list: [],
+      current_index: 0,
       current_id: '',
       category_description: '',
     }
@@ -216,11 +217,12 @@ export default {
       this.case_info = data;
       this.case_banner = data.file?.banner ? data.file?.banner[0] : 'https://cdn.ipadbiz.cn/hager/banner/banner08.png';
       this.case_list = data.list;
-      this.current_id = this.case_list[0]['id'];
-      this.success_data_list = this.case_list[0].list ?? [];
-      this.category_description = this.case_list[0].category_description ?? '';
-      this.case_img = this.case_list[0].file?.img ? this.case_list[0].file?.img : ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'];
-      this.product_list = this.case_list[0].product ?? [];
+      this.current_index = this.$route.query.current_index ? +this.$route.query.current_index : 0;
+      this.current_id = this.case_list[this.current_index]['id'];
+      this.success_data_list = this.case_list[this.current_index].list ?? [];
+      this.category_description = this.case_list[this.current_index].category_description ?? '';
+      this.case_img = this.case_list[this.current_index].file?.img ? this.case_list[this.current_index].file?.img : ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'];
+      this.product_list = this.case_list[this.current_index].product ?? [];
     }
     this.$nextTick(() => {
       this.$refs.myProductSwiper.$swiper?.on('breakpoint', (swiper) => {
@@ -248,6 +250,7 @@ export default {
         path: '/solution/case',
         query: {
           id: v.id,
+          current_index: this.current_index
         }
       });
     },
@@ -284,6 +287,7 @@ export default {
       }
     },
     changeCase (v, idx) {
+      this.current_index = idx;
       this.current_id = this.case_list[idx]['id'];
       this.success_data_list = this.case_list[idx].list ?? [];
       this.category_description = this.case_list[idx].category_description ?? '';
@@ -299,6 +303,14 @@ export default {
         clampText('.clamp-text', 3); // 限制显示三行文本
 
       })
+      // 记录点击的分类ID，用于返回定位到该分类
+      this.$router.push({
+        path: '/solution/detail',
+        query: {
+          ...this.$route.query,  // 先展开原来的参数
+          current_index: this.current_index
+        }
+      });
     }
   }
 }
@@ -486,7 +498,9 @@ export default {
     justify-content:space-around;
     margin-top: 2rem;
     .nav {
-      flex: 1; text-align: center; padding: 0.75rem 0;
+      flex: 1;
+      text-align: center;
+      padding: 1.5rem 0;
       position: relative;
       &:not(:last-child) {
         &::after {
@@ -503,8 +517,8 @@ export default {
     .detail-nav {
       display: inline;
       color: @text-color;
-      font-size: 1.05rem;
-      padding: 0.7rem 0;
+      font-size: 1.2rem;
+      padding: 1.4rem 0;
       &:hover {
         cursor: pointer;
       }