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

src/components/Sidebar/Sidebar.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="equipment-bar" v-if="!isCollapsed">
+    <img src="@/assets/images/equipment/侧边导航栏.png" alt="" />
+    <div class="equipment-item">
+      <div v-for="(item, index) in menuItems" :key="index" class="" @click="selectItem(index)">
+        <div class="menu-icon">
+          <img v-if="activeIndex === index" src="@/assets/images/equipment/选中按钮.png" alt="" />
+          <img
+            :src="activeIndex === index ? item.activeIcon : item.inactiveIcon"
+            :alt="item.title"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    style="cursor: pointer"
+    :class="isCollapsed ? 'equipment-arrow-left' : 'equipment-arrow-right'"
+    @click="isCollapsed = !isCollapsed"
+  >
+    <img :src="isCollapsed ? arrowright : arrowleft" alt="" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, withDefaults, defineProps, defineEmits } from 'vue'
+import arrowleft from '@/assets/images/equipment/按钮-收缩.png'
+import arrowright from '@/assets/images/equipment/按钮-展开.png'
+// 定义菜单项接口
+export interface MenuItem {
+  activeIcon: string // 高亮状态图标路径
+  inactiveIcon: string // 非高亮状态图标路径
+  title: string // 菜单项标题
+}
+
+// 定义组件属性
+interface Props {
+  menuItems: MenuItem[] // 菜单项数组
+  defaultActive?: number // 默认选中项索引
+  collapseIcon?: string // 折叠图标
+  expandIcon?: string // 展开图标
+}
+
+// 设置默认属性
+const props = withDefaults(defineProps<Props>(), {
+  defaultActive: 0
+})
+
+// 定义事件
+const emit = defineEmits<{
+  (e: 'item-selected', index: number): void
+  (e: 'toggle', collapsed: boolean): void
+}>()
+const isCollapsed = ref(false)
+// 当前选中项索引
+const activeIndex = ref(props.defaultActive)
+
+// 是否折叠
+const collapsed = ref(false)
+
+// 选择菜单项
+const selectItem = (index: number) => {
+  activeIndex.value = index
+  emit('item-selected', index)
+}
+
+// 切换折叠状态
+const toggleCollapse = () => {
+  collapsed.value = !collapsed.value
+}
+</script>
+
+<style lang="less">
+.equipment-item {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.equipment-arrow-left {
+  position: absolute;
+  top: 490px;
+  left: -41px;
+  width: 150px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+.equipment-arrow-right {
+  position: absolute;
+  top: 490px;
+  left: 268px;
+  width: 150px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+.menu-icon {
+  display: flex;
+  // justify-content: space-between;
+}
+</style>

src/router/index.ts

@@ -76,6 +76,14 @@ const routes: RouteRecordRaw[] = [
     meta: {
       title: '脚本准备'
     }
+  },
+  {
+    path: '/preparedetail',
+    name: 'Preparedetail',
+    component: () => import('@/views/preparedetail/index.vue'),
+    meta: {
+      title: '脚本准备详情'
+    }
   }
 ]
 

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>