feat: 实现头部按钮切换逻辑和页面常量配置系统

- 新增页面常量配置系统(src/config/pages.js)统一管理页面标识符 - 实现AppHeader组件响应式按钮切换，支持CAD连接状态检查 - 创建Creo专属页面组件(模型分析、导出工具)和通用格式转换页面 - 修复编码规范违规，消除硬编码魔法值，实现统一配置管理 - 集成DashboardView页面切换逻辑，左侧打开模型自动跳转查看页面 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-16 17:07:20 +08:00 · 2025-09-16 17:07:20 +08:00 · f8cc4277fa
commit f8cc4277fa
parent 633f4d7d40
6 changed files with 389 additions and 21 deletions
--- a/src/components/layout/AppHeader.vue
+++ b/src/components/layout/AppHeader.vue
@ -9,18 +9,46 @@

    <div class="navbar-center">
      <nav class="main-nav">
-        <a href="#" class="nav-item active" data-page="model-viewer">
+        <button
+          class="nav-item"
+          :class="{
+            active: currentPage === PAGE_TYPES.MODEL_VIEWER,
+            disabled: !isCADConnected
+          }"
+          :disabled="!isCADConnected"
+          @click="handleNavClick(PAGE_TYPES.MODEL_VIEWER)"
+        >
          <i class="fas fa-eye"></i>模型查看
-        </a>
-        <a href="#" class="nav-item" data-page="analysis-tools">
+        </button>
+        <button
+          class="nav-item"
+          :class="{
+            active: currentPage === PAGE_TYPES.ANALYSIS_TOOLS,
+            disabled: !isCADConnected
+          }"
+          :disabled="!isCADConnected"
+          @click="handleNavClick(PAGE_TYPES.ANALYSIS_TOOLS)"
+        >
          <i class="fas fa-layer-group"></i>模型分析
-        </a>
-        <a href="#" class="nav-item" data-page="export-tools">
+        </button>
+        <button
+          class="nav-item"
+          :class="{
+            active: currentPage === PAGE_TYPES.EXPORT_TOOLS,
+            disabled: !isCADConnected
+          }"
+          :disabled="!isCADConnected"
+          @click="handleNavClick(PAGE_TYPES.EXPORT_TOOLS)"
+        >
          <i class="fas fa-download"></i>导出
-        </a>
-        <a href="#" class="nav-item" data-page="format-converter">
+        </button>
+        <button
+          class="nav-item"
+          :class="{ active: currentPage === PAGE_TYPES.FORMAT_CONVERTER }"
+          @click="handleNavClick(PAGE_TYPES.FORMAT_CONVERTER)"
+        >
          <i class="fas fa-exchange-alt"></i>格式转换
-        </a>
+        </button>
      </nav>
    </div>

@ -42,16 +70,38 @@
 </template>

 <script setup>
+import { computed } from 'vue'
+import { useCADStore } from '@/stores/cad'
+import { PAGE_TYPES, CAD_REQUIRED_PAGES } from '@/config/pages'

-// const currentPageTitle = computed(() => {
-//   // 后续可以根据路由动态设置
-//   return 'CAD 软件管理'
-// })
+// Props
+const props = defineProps({
+  currentPage: {
+    type: String,
+    default: 'home'
+  }
+})

-// 预留登出功能
-// const handleLogout = () => {
-//   authStore.logout()
-// }
+// Emits
+const emit = defineEmits(['page-change'])
+
+// Store
+const cadStore = useCADStore()
+
+// 检查是否有CAD连接
+const isCADConnected = computed(() => {
+  return cadStore.currentCAD !== null
+})
+
+// 处理导航点击
+const handleNavClick = (page) => {
+  // 如果是需要CAD连接的页面，检查连接状态
+  if (CAD_REQUIRED_PAGES.includes(page) && !isCADConnected.value) {
+    return
+  }
+
+  emit('page-change', page)
+}
 </script>

 <style scoped>
@ -107,9 +157,12 @@
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
+  border: none;
+  background: transparent;
+  cursor: pointer;
 }

-.nav-item:hover {
+.nav-item:hover:not(.disabled) {
  background: var(--color-white-rgb-1);
  color: var(--color-text-primary);
 }
@ -119,6 +172,17 @@
  color: white;
 }

+.nav-item.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  color: var(--color-text-tertiary);
+}
+
+.nav-item.disabled:hover {
+  background: transparent;
+  color: var(--color-text-tertiary);
+}
+
 .nav-item i {
  font-size: 14px;
 }
--- a/src/components/pages/CreoExportTools.vue
+++ b/src/components/pages/CreoExportTools.vue
@ -0,0 +1,87 @@
+<template>
+  <div class="creo-export-page">
+    <div class="page-header">
+      <h2>
+        <i class="fas fa-download"></i>
+        导出工具
+      </h2>
+      <p>Creo模型导出功能</p>
+    </div>
+
+    <div class="page-content">
+      <div class="empty-state">
+        <i class="fas fa-download"></i>
+        <h3>导出工具</h3>
+        <p>Creo专属的模型导出功能开发中</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// Creo导出工具页面
+</script>
+
+<style scoped>
+.creo-export-page {
+  padding: 24px;
+  height: 100%;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h2 {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0 0 8px 0;
+}
+
+.page-header h2 i {
+  color: var(--color-primary);
+}
+
+.page-header p {
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+.page-content {
+  height: calc(100% - 100px);
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--color-text-tertiary);
+  text-align: center;
+}
+
+.empty-state i {
+  font-size: 64px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+  color: var(--color-primary);
+}
+
+.empty-state h3 {
+  font-size: 18px;
+  font-weight: 500;
+  margin: 0 0 8px 0;
+  color: var(--color-text-secondary);
+}
+
+.empty-state p {
+  font-size: 14px;
+  margin: 0;
+  color: var(--color-text-tertiary);
+}
+</style>
--- a/src/components/pages/CreoModelAnalysis.vue
+++ b/src/components/pages/CreoModelAnalysis.vue
@ -0,0 +1,87 @@
+<template>
+  <div class="creo-analysis-page">
+    <div class="page-header">
+      <h2>
+        <i class="fas fa-layer-group"></i>
+        模型分析
+      </h2>
+      <p>Creo模型分析功能</p>
+    </div>
+
+    <div class="page-content">
+      <div class="empty-state">
+        <i class="fas fa-layer-group"></i>
+        <h3>模型分析</h3>
+        <p>Creo专属的模型分析功能开发中</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// Creo模型分析页面
+</script>
+
+<style scoped>
+.creo-analysis-page {
+  padding: 24px;
+  height: 100%;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h2 {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0 0 8px 0;
+}
+
+.page-header h2 i {
+  color: var(--color-primary);
+}
+
+.page-header p {
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+.page-content {
+  height: calc(100% - 100px);
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--color-text-tertiary);
+  text-align: center;
+}
+
+.empty-state i {
+  font-size: 64px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+  color: var(--color-primary);
+}
+
+.empty-state h3 {
+  font-size: 18px;
+  font-weight: 500;
+  margin: 0 0 8px 0;
+  color: var(--color-text-secondary);
+}
+
+.empty-state p {
+  font-size: 14px;
+  margin: 0;
+  color: var(--color-text-tertiary);
+}
+</style>
--- a/src/components/pages/UniversalConverter.vue
+++ b/src/components/pages/UniversalConverter.vue
@ -0,0 +1,87 @@
+<template>
+  <div class="universal-converter-page">
+    <div class="page-header">
+      <h2>
+        <i class="fas fa-exchange-alt"></i>
+        格式转换
+      </h2>
+      <p>通用的模型格式转换工具</p>
+    </div>
+
+    <div class="page-content">
+      <div class="empty-state">
+        <i class="fas fa-exchange-alt"></i>
+        <h3>格式转换</h3>
+        <p>通用的模型格式转换功能开发中</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// 通用格式转换页面
+</script>
+
+<style scoped>
+.universal-converter-page {
+  padding: 24px;
+  height: 100%;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h2 {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0 0 8px 0;
+}
+
+.page-header h2 i {
+  color: var(--color-primary);
+}
+
+.page-header p {
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+.page-content {
+  height: calc(100% - 100px);
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--color-text-tertiary);
+  text-align: center;
+}
+
+.empty-state i {
+  font-size: 64px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+  color: var(--color-primary);
+}
+
+.empty-state h3 {
+  font-size: 18px;
+  font-weight: 500;
+  margin: 0 0 8px 0;
+  color: var(--color-text-secondary);
+}
+
+.empty-state p {
+  font-size: 14px;
+  margin: 0;
+  color: var(--color-text-tertiary);
+}
+</style>
--- a/src/config/pages.js
+++ b/src/config/pages.js
@ -0,0 +1,15 @@
+// 页面常量配置
+export const PAGE_TYPES = {
+  HOME: 'home',
+  MODEL_VIEWER: 'model-viewer',
+  ANALYSIS_TOOLS: 'analysis-tools',
+  EXPORT_TOOLS: 'export-tools',
+  FORMAT_CONVERTER: 'format-converter'
+}
+
+// 需要CAD连接的页面
+export const CAD_REQUIRED_PAGES = [
+  PAGE_TYPES.MODEL_VIEWER,
+  PAGE_TYPES.ANALYSIS_TOOLS,
+  PAGE_TYPES.EXPORT_TOOLS
+]
--- a/src/views/DashboardView.vue
+++ b/src/views/DashboardView.vue
@ -2,7 +2,10 @@
  <MainLayout>
    <!-- 顶部固定头部 -->
    <template #header>
-      <AppHeader />
+      <AppHeader
+        :current-page="currentPage"
+        @page-change="handlePageChange"
+      />
    </template>

    <!-- 左侧导航栏 -->
@ -82,11 +85,26 @@
          </div>
        </div>

-        <!-- 模型查看器页面 -->
-        <div v-if="showModelViewer" class="page-content">
+        <!-- 模型查看页面 -->
+        <div v-if="currentPage === PAGE_TYPES.MODEL_VIEWER && showModelViewer" class="page-content">
          <CreoModelViewer :model-data="currentModelData" />
        </div>

+        <!-- 模型分析页面 -->
+        <div v-else-if="currentPage === PAGE_TYPES.ANALYSIS_TOOLS" class="page-content">
+          <CreoModelAnalysis />
+        </div>
+
+        <!-- 导出工具页面 -->
+        <div v-else-if="currentPage === PAGE_TYPES.EXPORT_TOOLS" class="page-content">
+          <CreoExportTools />
+        </div>
+
+        <!-- 格式转换页面 -->
+        <div v-else-if="currentPage === PAGE_TYPES.FORMAT_CONVERTER" class="page-content">
+          <UniversalConverter />
+        </div>
+
        <!-- 欢迎首页 -->
        <div v-else class="page-content">
          <div class="welcome-page">
@ -172,9 +190,13 @@ import AppHeader from '@/components/layout/AppHeader.vue'
 import CadSidebar from '@/components/layout/CadSidebar.vue'
 import BaseButton from '@/components/ui/BaseButton.vue'
 import CreoModelViewer from '@/components/model/CreoModelViewer.vue'
+import CreoModelAnalysis from '@/components/pages/CreoModelAnalysis.vue'
+import CreoExportTools from '@/components/pages/CreoExportTools.vue'
+import UniversalConverter from '@/components/pages/UniversalConverter.vue'
+import { PAGE_TYPES } from '@/config/pages'

 // 当前页面状态
-const currentPage = ref('home')
+const currentPage = ref(PAGE_TYPES.HOME)

 // 模型查看器状态
 const showModelViewer = ref(false)
@ -184,6 +206,12 @@ const currentModelData = ref(null)
 const handleShowModelViewer = (modelData) => {
  currentModelData.value = modelData
  showModelViewer.value = true
+  currentPage.value = PAGE_TYPES.MODEL_VIEWER // 跳转到模型查看页面
+}
+
+// 处理页面切换
+const handlePageChange = (page) => {
+  currentPage.value = page
 }

 // 按钮事件处理