From f8cc4277fafd5b118e05b59c730ab03ca3370559 Mon Sep 17 00:00:00 2001
From: sladro <sladro@163.com>
Date: Tue, 16 Sep 2025 17:07:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E5=A4=B4=E9=83=A8?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=88=87=E6=8D=A2=E9=80=BB=E8=BE=91=E5=92=8C?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=B8=B8=E9=87=8F=E9=85=8D=E7=BD=AE=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增页面常量配置系统(src/config/pages.js)统一管理页面标识符
- 实现AppHeader组件响应式按钮切换，支持CAD连接状态检查
- 创建Creo专属页面组件(模型分析、导出工具)和通用格式转换页面
- 修复编码规范违规，消除硬编码魔法值，实现统一配置管理
- 集成DashboardView页面切换逻辑，左侧打开模型自动跳转查看页面

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/layout/AppHeader.vue         | 98 +++++++++++++++++----
 src/components/pages/CreoExportTools.vue    | 87 ++++++++++++++++++
 src/components/pages/CreoModelAnalysis.vue  | 87 ++++++++++++++++++
 src/components/pages/UniversalConverter.vue | 87 ++++++++++++++++++
 src/config/pages.js                         | 15 ++++
 src/views/DashboardView.vue                 | 36 +++++++-
 6 files changed, 389 insertions(+), 21 deletions(-)
 create mode 100644 src/components/pages/CreoExportTools.vue
 create mode 100644 src/components/pages/CreoModelAnalysis.vue
 create mode 100644 src/components/pages/UniversalConverter.vue
 create mode 100644 src/config/pages.js

diff --git a/src/components/layout/AppHeader.vue b/src/components/layout/AppHeader.vue
index ec8f11f..30ecebd 100644
--- 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;
 }
diff --git a/src/components/pages/CreoExportTools.vue b/src/components/pages/CreoExportTools.vue
new file mode 100644
index 0000000..9adf900
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/components/pages/CreoModelAnalysis.vue b/src/components/pages/CreoModelAnalysis.vue
new file mode 100644
index 0000000..48ba8c8
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/components/pages/UniversalConverter.vue b/src/components/pages/UniversalConverter.vue
new file mode 100644
index 0000000..7616a6d
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/config/pages.js b/src/config/pages.js
new file mode 100644
index 0000000..9d8b7f0
--- /dev/null
+++ 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
+]
\ No newline at end of file
diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue
index 6a70136..c4ed119 100644
--- 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
 }
 
 // 按钮事件处理