## 问题修复 - 修复点击标签按钮出现竖向滚动条的问题 - 修复滚动到底部会显示多个页面内容堆叠的问题 - 修复条件渲染链条被v-show打断导致的逻辑错误 ## 主要改动 ### 1. MainLayout.vue - 移除work-content的overflow-y: auto和padding - 改为overflow: hidden,让各页面组件自己控制滚动 ### 2. 创建独立页面组件 (7个新文件) - WelcomePage.vue - 欢迎首页 - ConnectionPage.vue - CAD连接页面 - SettingsPage.vue - 配置管理页面 - MonitoringPage.vue - 状态监控页面 - ModelViewerPage.vue - 模型查看器页面容器 - AnalysisToolsPage.vue - 分析工具页面容器 - ExportToolsPage.vue - 导出工具页面容器 ### 3. DashboardView.vue 重构 - 使用<component :is>动态组件替代大量v-if/v-else - 使用<KeepAlive :include="['ModelGalleryPage']">缓存模型库状态 - 创建pageComponentMap组件映射表 - 创建currentComponent和currentComponentProps计算属性 - 统一事件传递机制,简化代码结构 ### 4. 其他修改 - 修复ModelGalleryPage.vue的ESLint unused variable错误 - 新增ModelTreeNode.vue组件(用于模型结构树显示) ## 技术亮点 - 使用Vue 3 KeepAlive保持模型库页面的3D模型状态 - 动态组件实现清晰的页面切换逻辑 - 组件化设计,每个页面独立管理样式和逻辑 - 符合Vue官方最佳实践 ## 效果 - ✅ 页面切换无滚动条 - ✅ 不会出现多个页面内容堆叠 - ✅ 模型库的3D模型状态在切换页面后保持不变 - ✅ 代码结构更清晰,易于维护和扩展 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> |
||
|---|---|---|
| .claude | ||
| .vscode | ||
| config | ||
| docs | ||
| public | ||
| src | ||
| .editorconfig | ||
| .gitattributes | ||
| .gitignore | ||
| CLAUDE.md | ||
| CSS_THEME_GUIDE.md | ||
| index.html | ||
| jsconfig.json | ||
| package-lock.json | ||
| package.json | ||
.
This template should help get you started developing with Vue 3 in Vite.
Recommended IDE Setup
VSCode + Volar (and disable Vetur).
Customize configuration
See Vite Configuration Reference.
Project Setup
npm install
Compile and Hot-Reload for Development
npm run dev
Compile and Minify for Production
npm run build
Lint with ESLint
npm run lint