✨ feat(menu): 优化 CapsuleBox 组件的代码格式和可读性

src/views/menu/components/CapsuleBox.vue

@@ -1,50 +1,52 @@
 <template>
   <div class="capsule-container">
-    <div class="capsule-box" 
-    v-for="(item, index) in items" 
-    :key="index"  
-    @click="changeColor(index)"
-    :class="{'clicked': clickedIndex === index}">
+    <div
+      class="capsule-box"
+      v-for="(item, index) in items"
+      :key="index"
+      @click="changeColor(index)"
+      :class="{ clicked: clickedIndex === index }"
+    >
       {{ item.text }}
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { defineProps } from 'vue'
-const props = defineProps({
-  items: {
-    type: Array,
-    required: true,
-  },
-})
-// 使用 ref 来追踪哪个盒子被点击
-const clickedIndex = ref(null)
-const changeColor = (index) => {
-  console.log(index,111);
-  clickedIndex.value = index
-}
+  import { ref } from 'vue'
+
+  const props = defineProps({
+    items: {
+      type: Array,
+      required: true,
+    },
+  })
+  // 使用 ref 来追踪哪个盒子被点击
+  const clickedIndex = ref(null)
+  const changeColor = (index) => {
+    console.log(index, 111)
+    clickedIndex.value = index
+  }
 </script>
 
 <style scoped>
-.capsule-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-.capsule-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 50px;
-  border-radius: 8px;
-  padding: 24px;
-  color: #000;
-  border: 1px solid #ccc;
-}
-.capsule-box:hover {
-  background-color: rgba(246, 127, 32, 1);
-  color: #fff;
-}
+  .capsule-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+  }
+  .capsule-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+    border-radius: 8px;
+    padding: 24px;
+    color: #000;
+    border: 1px solid #ccc;
+  }
+  .capsule-box:hover {
+    background-color: rgba(246, 127, 32, 1);
+    color: #fff;
+  }
 </style>