feat: 侧边栏单独模块下使用公共

src/views/preparedetail/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="absolute inset-0 bg-cover bg-center bg-no-repeat equipment-bg"
+    :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.EQUIPMENT.BG) }"
+  >
+    <Sidebar
+      :menu-items="menuItems"
+      :default-active="defaultActive"
+      @item-selected="handleMenuItemSelected"
+      @toggle="handleSidebarToggle"
+    />
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { ref, reactive, onMounted } from 'vue'
+import Sidebar from '@/components/Sidebar/Sidebar.vue'
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import equipmentPhone from '@/assets/images/equipment/手机-亮.png'
+import equipmentPhone2 from '@/assets/images/equipment/手机-暗.png'
+const menuItems = ref([
+  {
+    activeIcon: equipmentPhone,
+    inactiveIcon: equipmentPhone2,
+    title: '手机'
+  },
+  {
+    activeIcon: equipmentPhone,
+    inactiveIcon: equipmentPhone2,
+    title: '手机2'
+  },
+  {
+    activeIcon: equipmentPhone,
+    inactiveIcon: equipmentPhone2,
+    title: '手机3'
+  }
+])
+const defaultActive = ref(0)
+const handleMenuItemSelected = (index: number) => {
+  defaultActive.value = index
+  console.log('选中了菜单项:', index)
+  // 根据选中的菜单项更新页面内容
+}
+const handleSidebarToggle = (collapsed: boolean) => {
+  console.log('侧边栏状态:', collapsed ? '已折叠' : '已展开')
+}
+</script>
+
+<style scoped lang="less"></style>