# SsSubTab 组件改造方案 ## 文件位置 `/js/vue/ss-components.js` 第 5715-5895 行 ## 改造目标 ### 1. UI 模式改造 - **去掉**：顶部图片 `headerImage` - **新增两种模式**： - `collapse`（默认）：只显示图标，鼠标悬停时浮动显示文字 - `fixed`：只显示图标，不展开浮动 ### 2. 性能优化 - **现状**：iframe 用 `v-show`，页面打开时全部加载 - **改为**：懒加载，点击哪个才加载哪个 --- ## 具体修改方案 ### 一、Props 修改 ```js // 删除 headerImage: { type: String, default: "" }, // 新增 initialMode: { type: String, default: 'collapse', // 'collapse' | 'fixed' validator: (v) => ['collapse', 'fixed'].includes(v) }, ``` ### 二、Setup 新增逻辑 ```js setup(props, { emit }) { // ... 原有逻辑保留 ... // ===== 新增：菜单模式管理 ===== const menuMode = ref(props.initialMode); // 'collapse' | 'fixed' const isHovering = ref(false); // 鼠标是否在菜单区域 // 切换模式 const toggleMenuMode = () => { menuMode.value = menuMode.value === 'collapse' ? 'fixed' : 'collapse'; }; // 鼠标进入/离开 const onMouseEnter = () => { if (menuMode.value === 'collapse') { isHovering.value = true; } }; const onMouseLeave = () => { isHovering.value = false; }; // 是否显示文字（展开状态） const isExpanded = computed(() => { return menuMode.value === 'collapse' && isHovering.value; }); // ===== 新增：iframe 懒加载 ===== const loadedMenus = ref(new Set()); // 已加载过的菜单 name // 修改 selectItem const selectItem = (item) => { currentMenu.value = item; // 标记为已加载 if (item.name) { loadedMenus.value.add(item.name); } emit("menu-change", item); }; // 初始化：默认选中项需要加入已加载集合 watch(currentMenu, (menu) => { if (menu?.name) { loadedMenus.value.add(menu.name); } }, { immediate: true }); // 判断菜单是否已加载 const isMenuLoaded = (menuName) => { return loadedMenus.value.has(menuName); }; return { // 原有 currentMenu, selectItem, handleFooterClick, // 新增 menuMode, isHovering, isExpanded, toggleMenuMode, onMouseEnter, onMouseLeave, isMenuLoaded, }; } ``` ### 三、Template 修改 ```html