From 61419862499ec7a0df3d91c4163bbb479a1067cb Mon Sep 17 00:00:00 2001
From: sladro <sladro@163.com>
Date: Fri, 10 Oct 2025 16:20:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=A8=A1=E5=9E=8B?=
 =?UTF-8?q?=E5=BA=93=E9=A1=B5=E9=9D=A2=E5=92=8C=E5=AF=BC=E8=88=AA=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在页面配置中新增MODEL_GALLERY页面类型
- 创建ModelGalleryPage空白页面组件，使用标准结构和CSS变量系统
- 在头部导航栏"导出"按钮旁添加"模型库"按钮
- 在DashboardView中集成新页面
- 模型库页面不需要CAD连接即可访问

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/layout/AppHeader.vue       |   7 +
 src/components/pages/ModelGalleryPage.vue | 200 ++++++++++++++++++++++
 src/config/pages.js                       |   1 +
 src/views/DashboardView.vue               |   6 +
 4 files changed, 214 insertions(+)
 create mode 100644 src/components/pages/ModelGalleryPage.vue

diff --git a/src/components/layout/AppHeader.vue b/src/components/layout/AppHeader.vue
index 78e5362..7c0330e 100644
--- a/src/components/layout/AppHeader.vue
+++ b/src/components/layout/AppHeader.vue
@@ -42,6 +42,13 @@
         >
           <i class="fas fa-download"></i>导出
         </button>
+        <button
+          class="nav-item"
+          :class="{ active: currentPage === PAGE_TYPES.MODEL_GALLERY }"
+          @click="handleNavClick(PAGE_TYPES.MODEL_GALLERY)"
+        >
+          <i class="fas fa-images"></i>模型库
+        </button>
         <button
           class="nav-item"
           :class="{ active: currentPage === PAGE_TYPES.FORMAT_CONVERTER }"
diff --git a/src/components/pages/ModelGalleryPage.vue b/src/components/pages/ModelGalleryPage.vue
new file mode 100644
index 0000000..c60ae9e
--- /dev/null
+++ b/src/components/pages/ModelGalleryPage.vue
@@ -0,0 +1,200 @@
+<template>
+  <div class="gallery-container">
+    <!-- 页面头部 -->
+    <div class="gallery-header">
+      <div class="header-content">
+        <div class="header-icon">
+          <i class="fas fa-images"></i>
+        </div>
+        <div class="header-text">
+          <h2>模型库</h2>
+          <p>浏览和管理您的模型资源</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 页面内容 -->
+    <div class="gallery-content">
+      <div class="placeholder-section">
+        <div class="placeholder-icon">
+          <i class="fas fa-cube"></i>
+        </div>
+        <h3>模型库功能开发中</h3>
+        <p>这里将展示所有已保存的模型文件，方便您快速查看和管理</p>
+
+        <div class="feature-preview">
+          <div class="preview-item">
+            <i class="fas fa-folder-open"></i>
+            <span>模型分类浏览</span>
+          </div>
+          <div class="preview-item">
+            <i class="fas fa-search"></i>
+            <span>快速搜索定位</span>
+          </div>
+          <div class="preview-item">
+            <i class="fas fa-download"></i>
+            <span>一键导入导出</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// 模型库页面 - 暂时只显示占位内容
+</script>
+
+<style scoped>
+.gallery-container {
+  padding: var(--spacing-2xl);
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.gallery-header {
+  margin-bottom: var(--spacing-3xl);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xl);
+}
+
+.header-icon {
+  width: var(--size-64);
+  height: var(--size-64);
+  background: var(--color-primary-gradient);
+  border-radius: var(--size-border-radius-card);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-4xl);
+  color: white;
+  box-shadow: 0 4px 16px var(--color-primary-rgb);
+}
+
+.header-text h2 {
+  color: var(--color-text-primary);
+  margin: 0 0 var(--spacing-sm) 0;
+  font-size: var(--font-size-5xl);
+  font-weight: var(--font-weight-semibold);
+}
+
+.header-text p {
+  color: var(--color-text-secondary);
+  margin: 0;
+  font-size: var(--font-size-lg);
+}
+
+.gallery-content {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--size-border-radius-card);
+  padding: var(--spacing-5xl);
+}
+
+.placeholder-section {
+  text-align: center;
+  padding: var(--spacing-4xl) var(--spacing-2xl);
+}
+
+.placeholder-icon {
+  width: var(--size-96);
+  height: var(--size-96);
+  background: var(--color-primary-gradient);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-6xl);
+  color: white;
+  margin: 0 auto var(--spacing-2xl);
+  box-shadow: 0 8px 32px var(--color-primary-rgb-3);
+}
+
+.placeholder-section h3 {
+  color: var(--color-text-primary);
+  margin: 0 0 var(--spacing-md) 0;
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
+}
+
+.placeholder-section p {
+  color: var(--color-text-secondary);
+  margin: 0 0 var(--spacing-3xl) 0;
+  font-size: var(--font-size-lg);
+  line-height: 1.6;
+}
+
+.feature-preview {
+  display: flex;
+  gap: var(--spacing-2xl);
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: var(--spacing-3xl);
+}
+
+.preview-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-xl);
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--size-border-radius);
+  min-width: var(--size-150);
+  transition: var(--transition-all);
+}
+
+.preview-item:hover {
+  background: var(--color-bg-hover);
+  border-color: var(--color-primary);
+  transform: translateY(-2px);
+}
+
+.preview-item i {
+  font-size: var(--font-size-3xl);
+  color: var(--color-primary);
+}
+
+.preview-item span {
+  color: var(--color-text-primary);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .gallery-container {
+    padding: var(--spacing-lg);
+  }
+
+  .header-content {
+    gap: var(--spacing-md);
+  }
+
+  .header-icon {
+    width: var(--size-48);
+    height: var(--size-48);
+    font-size: var(--font-size-2xl);
+  }
+
+  .header-text h2 {
+    font-size: var(--font-size-3xl);
+  }
+
+  .placeholder-icon {
+    width: var(--size-64);
+    height: var(--size-64);
+    font-size: var(--font-size-4xl);
+  }
+
+  .feature-preview {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+</style>
diff --git a/src/config/pages.js b/src/config/pages.js
index aaabed2..60cdd98 100644
--- a/src/config/pages.js
+++ b/src/config/pages.js
@@ -2,6 +2,7 @@
 export const PAGE_TYPES = {
   HOME: 'home',
   MODEL_VIEWER: 'model-viewer',
+  MODEL_GALLERY: 'model-gallery',
   ANALYSIS_TOOLS: 'analysis-tools',
   EXPORT_TOOLS: 'export-tools',
   FORMAT_CONVERTER: 'format-converter',
diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue
index dc0e37d..efa0dc6 100644
--- a/src/views/DashboardView.vue
+++ b/src/views/DashboardView.vue
@@ -134,6 +134,11 @@
           <UniversalConverter />
         </div>
 
+        <!-- 模型库页面 -->
+        <div v-else-if="currentPage === PAGE_TYPES.MODEL_GALLERY" class="page-content">
+          <ModelGalleryPage />
+        </div>
+
         <!-- 智能薄壳化分析结果页面 -->
         <div v-else-if="currentPage === PAGE_TYPES.SHELL_ANALYSIS_RESULT" class="page-content">
           <ShellAnalysisResult :analysis-data="shellAnalysisData" />
@@ -276,6 +281,7 @@ import CreoModelAnalysis from '@/components/pages/CreoModelAnalysis.vue'
 import CreoExportTools from '@/components/pages/CreoExportTools.vue'
 import RevitExportTools from '@/components/pages/RevitExportTools.vue'
 import UniversalConverter from '@/components/pages/UniversalConverter.vue'
+import ModelGalleryPage from '@/components/pages/ModelGalleryPage.vue'
 import ShellAnalysisResult from '@/components/pages/ShellAnalysisResult.vue'
 import HierarchyAnalysisResult from '@/components/pages/HierarchyAnalysisResult.vue'
 import HierarchyDeletionParamsPage from '@/components/pages/HierarchyDeletionParamsPage.vue'