sladro
e35455fd78
- 添加丰富的项目描述和功能介绍内容 - 实现四大核心能力展示（多CAD管理、智能分析、导出支持、状态监控） - 集成技术特色说明和使用引导 - 使用响应式卡片布局，支持桌面和移动端 - 完全集成现有CSS变量主题系统和工业化配色 - 添加hover动画效果和视觉层次设计 - 修改默认页面状态，优化用户首次访问体验 - 更新项目文档，记录首页设计实现过程 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
598 lines
14 KiB
Vue
598 lines
14 KiB
Vue
<template>
|
||
<MainLayout>
|
||
<!-- 顶部固定头部 -->
|
||
<template #header>
|
||
<AppHeader />
|
||
</template>
|
||
|
||
<!-- 左侧导航栏 -->
|
||
<template #sidebar>
|
||
<CadSidebar @nav-click="handleNavClick" />
|
||
</template>
|
||
|
||
<!-- 右侧内容区域 -->
|
||
<template #content>
|
||
<!-- 根据当前导航显示不同内容 -->
|
||
<div class="content-wrapper">
|
||
<!-- CAD软件连接页面 -->
|
||
<div v-if="currentPage === 'connection'" class="page-content">
|
||
<ContentArea title="CAD 软件连接" cardTitle="连接状态">
|
||
<template #content>
|
||
<div class="connection-page">
|
||
<div class="status-display">
|
||
<div class="status-card">
|
||
<div class="status-icon disconnected">
|
||
<i class="fas fa-unlink"></i>
|
||
</div>
|
||
<div class="status-text">
|
||
<h3>未连接</h3>
|
||
<p>当前没有连接到任何CAD软件</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="action-buttons">
|
||
<BaseButton type="primary" icon="fas fa-plug" @click="connectCAD">
|
||
连接CAD软件
|
||
</BaseButton>
|
||
<BaseButton type="secondary" icon="fas fa-wrench" @click="openSettings">
|
||
配置设置
|
||
</BaseButton>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</ContentArea>
|
||
</div>
|
||
|
||
<!-- 配置管理页面 -->
|
||
<div v-else-if="currentPage === 'settings'" class="page-content">
|
||
<ContentArea title="配置管理" cardTitle="软件配置">
|
||
<template #content>
|
||
<div class="settings-page">
|
||
<div class="settings-section">
|
||
<h4>连接设置</h4>
|
||
<div class="setting-item">
|
||
<label>服务器地址</label>
|
||
<input type="text" placeholder="localhost" class="setting-input">
|
||
</div>
|
||
<div class="setting-item">
|
||
<label>端口号</label>
|
||
<input type="number" placeholder="8080" class="setting-input">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-actions">
|
||
<BaseButton type="primary">保存配置</BaseButton>
|
||
<BaseButton type="secondary">重置默认</BaseButton>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</ContentArea>
|
||
</div>
|
||
|
||
<!-- 状态监控页面 -->
|
||
<div v-else-if="currentPage === 'monitoring'" class="page-content">
|
||
<ContentArea title="状态监控" cardTitle="系统状态">
|
||
<template #content>
|
||
<div class="monitoring-page">
|
||
<div class="status-grid">
|
||
<div class="status-item">
|
||
<div class="status-label">CPU使用率</div>
|
||
<div class="status-value">45%</div>
|
||
</div>
|
||
<div class="status-item">
|
||
<div class="status-label">内存使用</div>
|
||
<div class="status-value">2.1GB</div>
|
||
</div>
|
||
<div class="status-item">
|
||
<div class="status-label">连接状态</div>
|
||
<div class="status-value disconnected">离线</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</ContentArea>
|
||
</div>
|
||
|
||
<!-- 欢迎首页 -->
|
||
<div v-else class="page-content">
|
||
<ContentArea title="欢迎使用 MianyVue" cardTitle="工业CAD模型管理统一平台">
|
||
<template #content>
|
||
<div class="welcome-page">
|
||
<!-- 项目描述 -->
|
||
<div class="project-description">
|
||
<p>
|
||
MianyVue是一个专业的工业CAD模型管理平台，致力于为工程师和设计师提供统一的CAD软件集成解决方案。平台通过标准化的API接口连接主流CAD软件，实现跨平台的模型管理、分析和优化功能，显著提升工业设计和制造流程的效率与协作能力。
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 核心能力 -->
|
||
<div class="feature-section">
|
||
<h3 class="section-title">
|
||
<i class="fas fa-cogs"></i>
|
||
核心能力
|
||
</h3>
|
||
<div class="feature-list">
|
||
<div class="feature-item">
|
||
<h4>
|
||
<i class="fas fa-desktop"></i>
|
||
多CAD软件统一管理
|
||
</h4>
|
||
<p>支持Creo、Revit、PDMS、AutoCAD、SolidWorks、CATIA等主流CAD软件，可根据需要扩展更多软件支持</p>
|
||
</div>
|
||
|
||
<div class="feature-item">
|
||
<h4>
|
||
<i class="fas fa-search"></i>
|
||
智能模型分析
|
||
</h4>
|
||
<p>提供层级结构分析、几何复杂度评估、薄壳分析等专业分析功能，帮助优化设计方案</p>
|
||
</div>
|
||
|
||
<div class="feature-item">
|
||
<h4>
|
||
<i class="fas fa-download"></i>
|
||
灵活导出支持
|
||
</h4>
|
||
<p>支持STEP、IGES、STL、IFC等多种工业标准格式，满足不同应用场景的数据交换需求</p>
|
||
</div>
|
||
|
||
<div class="feature-item">
|
||
<h4>
|
||
<i class="fas fa-heartbeat"></i>
|
||
实时状态监控
|
||
</h4>
|
||
<p>实时监控各CAD软件连接状态，确保系统稳定运行，提供详细的操作日志和性能指标</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 技术特色 -->
|
||
<div class="tech-section">
|
||
<h3 class="section-title">
|
||
<i class="fas fa-rocket"></i>
|
||
技术特色
|
||
</h3>
|
||
<div class="tech-description">
|
||
<p>
|
||
基于Vue 3和现代Web技术构建，采用模块化架构设计，支持响应式界面和实时数据交互。平台遵循工业级安全标准，确保设计数据的安全性和可靠性。通过标准化API和微服务架构，实现高度的可扩展性和灵活的定制能力。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 使用引导 -->
|
||
<div class="guide-section">
|
||
<div class="guide-text">
|
||
<i class="fas fa-hand-point-left"></i>
|
||
请使用左侧导航菜单开始您的工作
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</ContentArea>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</MainLayout>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import MainLayout from '@/components/layout/MainLayout.vue'
|
||
import AppHeader from '@/components/layout/AppHeader.vue'
|
||
import CadSidebar from '@/components/layout/CadSidebar.vue'
|
||
import ContentArea from '@/components/layout/ContentArea.vue'
|
||
import BaseButton from '@/components/ui/BaseButton.vue'
|
||
|
||
// 当前页面状态
|
||
const currentPage = ref('home')
|
||
|
||
// 导航点击处理
|
||
const handleNavClick = (navItem) => {
|
||
switch (navItem) {
|
||
case 'connection':
|
||
currentPage.value = 'connection'
|
||
break
|
||
case 'settings':
|
||
currentPage.value = 'settings'
|
||
break
|
||
case 'monitoring':
|
||
currentPage.value = 'monitoring'
|
||
break
|
||
default:
|
||
currentPage.value = navItem
|
||
}
|
||
}
|
||
|
||
// 按钮事件处理
|
||
const connectCAD = () => {
|
||
// CAD连接逻辑
|
||
}
|
||
|
||
const openSettings = () => {
|
||
// 设置界面逻辑
|
||
currentPage.value = 'settings'
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.content-wrapper {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
.page-content {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 连接页面样式 */
|
||
.connection-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
gap: 24px;
|
||
}
|
||
|
||
.status-display {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.status-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
padding: 20px;
|
||
background: var(--color-white-rgb-05);
|
||
border: 1px solid var(--color-white-rgb-1);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.status-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.status-icon.disconnected {
|
||
background: var(--color-error-rgb-1);
|
||
color: var(--color-text-error);
|
||
border: 1px solid var(--color-error-rgb-3);
|
||
}
|
||
|
||
.status-text h3 {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--color-text-primary);
|
||
margin: 0 0 4px 0;
|
||
}
|
||
|
||
.status-text p {
|
||
font-size: 14px;
|
||
color: var(--color-text-secondary);
|
||
margin: 0;
|
||
}
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-top: auto;
|
||
padding-top: 20px;
|
||
}
|
||
|
||
/* 设置页面样式 */
|
||
.settings-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
gap: 24px;
|
||
}
|
||
|
||
.settings-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.settings-section h4 {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--color-text-primary);
|
||
margin: 0;
|
||
}
|
||
|
||
.setting-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.setting-item label {
|
||
font-size: 14px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.setting-input {
|
||
padding: 10px 12px;
|
||
background: var(--color-white-rgb-05);
|
||
border: 1px solid var(--color-white-rgb-1);
|
||
border-radius: 6px;
|
||
color: var(--color-text-primary);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.setting-input:focus {
|
||
outline: none;
|
||
border-color: var(--color-border-active);
|
||
box-shadow: 0 0 0 3px var(--color-primary-rgb);
|
||
}
|
||
|
||
.settings-actions {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-top: auto;
|
||
padding-top: 20px;
|
||
}
|
||
|
||
/* 监控页面样式 */
|
||
.monitoring-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
gap: 24px;
|
||
}
|
||
|
||
.status-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.status-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
padding: 16px;
|
||
background: var(--color-white-rgb-05);
|
||
border: 1px solid var(--color-white-rgb-1);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.status-label {
|
||
font-size: 14px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.status-value {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.status-value.disconnected {
|
||
color: var(--color-text-error);
|
||
}
|
||
|
||
/* 空页面样式 */
|
||
.empty-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 400px;
|
||
color: var(--color-text-tertiary);
|
||
text-align: center;
|
||
}
|
||
|
||
.empty-page i {
|
||
font-size: 64px;
|
||
margin-bottom: 16px;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.empty-page h3 {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
margin: 0 0 8px 0;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.empty-page p {
|
||
font-size: 14px;
|
||
margin: 0;
|
||
color: var(--color-text-tertiary);
|
||
}
|
||
|
||
/* 按钮基础样式 */
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 20px;
|
||
border: 1px solid var(--color-white-rgb-2);
|
||
border-radius: 6px;
|
||
background: var(--color-white-rgb-05);
|
||
color: var(--color-text-primary);
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.btn:hover {
|
||
background: var(--color-white-rgb-1);
|
||
border-color: var(--color-white-rgb-3);
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--color-primary-gradient);
|
||
border-color: transparent;
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: var(--color-primary-gradient-hover);
|
||
box-shadow: 0 4px 15px var(--color-primary-rgb-3);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: var(--color-white-rgb-1);
|
||
border-color: var(--color-white-rgb-2);
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: var(--color-white-rgb-15);
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
/* 欢迎页面样式 */
|
||
.welcome-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 32px;
|
||
padding: 20px 0;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.project-description {
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.project-description p {
|
||
font-size: 16px;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.8;
|
||
margin: 0;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: var(--color-text-primary);
|
||
margin: 0 0 20px 0;
|
||
border-bottom: 2px solid var(--color-primary-rgb);
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.section-title i {
|
||
color: var(--color-primary);
|
||
font-size: 20px;
|
||
}
|
||
|
||
.feature-list {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 20px;
|
||
}
|
||
|
||
.feature-item {
|
||
background: var(--color-white-rgb-05);
|
||
border: 1px solid var(--color-white-rgb-1);
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.feature-item:hover {
|
||
background: var(--color-white-rgb-1);
|
||
border-color: var(--color-white-rgb-2);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.feature-item h4 {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--color-text-primary);
|
||
margin: 0 0 12px 0;
|
||
}
|
||
|
||
.feature-item h4 i {
|
||
color: var(--color-primary);
|
||
font-size: 18px;
|
||
width: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.feature-item p {
|
||
font-size: 14px;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.6;
|
||
margin: 0;
|
||
}
|
||
|
||
.tech-description p {
|
||
font-size: 15px;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.7;
|
||
margin: 0;
|
||
padding: 0 10px;
|
||
text-align: justify;
|
||
}
|
||
|
||
.guide-section {
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
padding-top: 20px;
|
||
border-top: 1px solid var(--color-white-rgb-1);
|
||
}
|
||
|
||
.guide-text {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 16px;
|
||
color: var(--color-text-tertiary);
|
||
background: var(--color-white-rgb-05);
|
||
padding: 12px 20px;
|
||
border-radius: 6px;
|
||
border: 1px solid var(--color-white-rgb-1);
|
||
}
|
||
|
||
.guide-text i {
|
||
color: var(--color-primary);
|
||
font-size: 18px;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.welcome-page {
|
||
padding: 15px;
|
||
gap: 24px;
|
||
}
|
||
|
||
.feature-list {
|
||
grid-template-columns: 1fr;
|
||
gap: 16px;
|
||
}
|
||
|
||
.project-description p {
|
||
font-size: 15px;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.feature-item {
|
||
padding: 16px;
|
||
}
|
||
}
|
||
</style> |