cjw/geMoldInsight
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
SZCJW
2026-03-04 00:10:05 +08:00
parent ea67bfa5b2
commit cf811d28a9
2 changed files with 1391 additions and 1800 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+1117 -1436
View File
File diff suppressed because it is too large Load Diff
static/vue-app.js
+274 -364
View File
@@ -1,24 +1,23 @@
/**
* STP模具几何分析中心 - Vue3单页应用
* 版本: 4.0.0 - 暖白色主题 + 增强动画效果
* 版本: 5.0.0 - Modern Minimal UI
* 设计灵感: Linear, Notion, Vercel, Stripe
*/
const { createApp, ref, computed, onMounted, reactive, watch, nextTick } = Vue;
const { createRouter, createWebHistory, useRoute, useRouter } = VueRouter;
// 全局状态管理
const appState = reactive({
health: null,
loading: false,
notifications: [],
theme: 'warm'
theme: 'modern'
});
// 通用工具函数
function formatFileSize(bytes) {
if (!bytes || bytes === 0) return "0 Bytes";
if (!bytes || bytes === 0) return "0 B";
const k = 1024;
const sizes = ["Bytes", "KB", "MB", "GB"];
const sizes = ["B", "KB", "MB", "GB"];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
}
@@ -51,12 +50,12 @@ function statusText(status) {
function getStatusClass(status) {
const classMap = {
pending: "status-pending",
processing: "status-processing",
completed: "status-completed",
failed: "status-failed"
pending: "badge-warning",
processing: "badge-info",
completed: "badge-success",
failed: "badge-error"
};
return classMap[status] || "status-pending";
return classMap[status] || "badge-neutral";
}
let notificationId = 0;
@@ -93,7 +92,6 @@ function handleApiError(error, context = '') {
return message;
}
// 顶部导航 + 布局
const App = {
setup() {
const route = useRoute();
@@ -110,7 +108,6 @@ const App = {
}
} catch (error) {
appState.health = null;
handleApiError(error, '健康检查');
}
};
@@ -143,77 +140,80 @@ const App = {
};
},
template: `
<div class="app-shell">
<!-- 通知区域 -->
<div class="app-container">
<div class="notification-container" v-if="appState.notifications.length > 0">
<TransitionGroup name="notification">
<div
v-for="notification in appState.notifications"
:key="notification.id"
:class="['notification', 'notification-' + notification.type, { 'notification-hidden': !notification.visible }]"
:class="['notification', 'notification-' + notification.type]"
>
<span class="notification-icon">
{{ notification.type === 'success' ? '✓' : notification.type === 'error' ? '✕' : notification.type === 'warning' ? '⚠' : 'ℹ' }}
</span>
<span class="notification-message">{{ notification.message }}</span>
<div class="notification-icon">
{{ notification.type === 'success' ? '✓' : notification.type === 'error' ? '✕' : notification.type === 'warning' ? '!' : 'i' }}
</div>
<div class="notification-content">
<div class="notification-message">{{ notification.message }}</div>
</div>
<button class="notification-close" @click="dismissNotification(notification.id)">×</button>
</div>
</TransitionGroup>
</div>
<header class="app-header">
<div class="app-title">
<span class="logo">🔧</span>
<div>
<h1>STP 模具几何分析中心</h1>
<p class="app-subtitle">专业模具几何分析，支持型腔自动生成与工艺参数计算</p>
<div class="header-content">
<div class="logo">
<div class="logo-icon">◈</div>
<div>
<div class="logo-text">MoldInsight</div>
<div class="logo-subtitle">STP 模具几何分析</div>
</div>
</div>
<nav class="nav-menu">
<router-link :class="['nav-item', { active: isActive('/').value }]" to="/">
仪表盘
</router-link>
<router-link :class="['nav-item', { active: isActive('/history').value }]" to="/history">
历史记录
</router-link>
</nav>
<div class="user-section">
<div class="status-badge">
<span class="status-dot"></span>
<span>系统运行中</span>
</div>
</div>
</div>
<nav class="app-nav">
<router-link :class="['nav-link', { active: isActive('/').value }]" to="/">
<span class="nav-icon">📊</span>
<span>仪表盘</span>
</router-link>
<router-link :class="['nav-link', { active: isActive('/history').value }]" to="/history">
<span class="nav-icon">📋</span>
<span>历史记录</span>
</router-link>
</nav>
</header>
<main class="app-main">
<main class="main-content">
<router-view v-slot="{ Component }">
<transition name="fade-slide" mode="out-in">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</main>
<footer class="app-footer">
<div class="footer-left">
<div class="footer-content">
<span class="footer-item">
<span class="footer-label">PythonOCC:</span>
<strong :class="appState.health?.pythonocc ? 'status-success' : 'status-error'">
{{ appState.health?.pythonocc ? '可用' : '未知' }}
</strong>
<strong>{{ appState.health?.pythonocc ? '可用' : '检测中...' }}</strong>
</span>
<span v-if="appState.health" class="footer-divider">|</span>
<span class="footer-divider"></span>
<span v-if="appState.health" class="footer-item">
<span class="footer-label">当前任务数:</span>
<span class="footer-label">任务数:</span>
<strong>{{ appState.health.total_tasks }}</strong>
</span>
</div>
<div class="footer-right">
<span class="footer-item">版本: <strong>4.0.0</strong></span>
<span class="footer-divider">|</span>
<span class="footer-item">模具几何分析系统</span>
<span class="footer-divider"></span>
<span class="footer-item">版本 5.0.0</span>
</div>
</footer>
</div>
`,
};
// 仪表盘视图：上传 + 总览
const DashboardView = {
setup() {
const router = useRouter();
@@ -347,7 +347,7 @@ const DashboardView = {
if (task.status === "completed") {
state.polling = false;
state.progress = 100;
addNotification(`分析完成，正在跳转到结果页面...`, 'success');
addNotification(`分析完成，正在跳转...`, 'success');
setTimeout(() => {
router.push(`/result/${task.task_id}`);
}, 1000);
@@ -361,7 +361,7 @@ const DashboardView = {
state.polling = false;
state.progress = 0;
state.error = "任务处理超时，请稍后查看结果";
addNotification("任务处理超时，请稍后查看结果", 'warning');
addNotification("任务处理超时", 'warning');
} else {
setTimeout(poll, 1000);
}
@@ -383,7 +383,6 @@ const DashboardView = {
}
} catch (e) {
state.historySummary = null;
handleApiError(e, '加载历史记录');
}
};
@@ -414,8 +413,7 @@ const DashboardView = {
};
},
template: `
<div class="dashboard">
<!-- 统计卡片 -->
<div>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-icon">📁</div>
@@ -429,7 +427,7 @@ const DashboardView = {
</div>
<div class="stat-card">
<div class="stat-icon">⚡</div>
<div class="stat-value">{{ state.polling ? '分析中' : '就绪' }}</div>
<div class="stat-value">{{ state.polling ? '...' : '就绪' }}</div>
<div class="stat-label">系统状态</div>
</div>
<div class="stat-card">
@@ -439,119 +437,105 @@ const DashboardView = {
</div>
</div>
<div class="grid-2">
<!-- 上传区域 -->
<div class="card upload-card">
<h2>
<span class="card-icon">📤</span>
上传 STP / STEP 文件
</h2>
<p class="card-subtitle">上传后系统会自动解析几何、生成模具型腔并计算关键工艺参数。</p>
<div class="upload-section">
<div class="content-grid">
<div class="card">
<div class="card-header">
<div class="card-title">
<div class="card-title-icon">📤</div>
上传文件
</div>
</div>
<div class="card-body">
<label
class="upload-area"
class="upload-zone"
:class="{ 'drag-over': state.dragOver }"
@dragover.prevent="handleDragOver"
@dragleave.prevent="handleDragLeave"
@drop.prevent="handleDrop"
>
<input type="file" accept=".stp,.step" @change="handleFileChange" hidden />
<div class="upload-icon">📂</div>
<div v-if="!state.selectedFile" class="upload-content">
<h3>点击选择或拖拽文件到此处</h3>
<p>最大 100MB，支持 .stp / .step</p>
</div>
<div v-else class="upload-selected">
<h3>已选择文件</h3>
<p class="filename"><strong>{{ state.selectedFile.name }}</strong></p>
<p class="filesize">大小：{{ formatFileSize(state.selectedFile.size) }}</p>
<button class="btn btn-secondary clear-btn" @click.stop="clearFile">清除选择</button>
<div class="upload-icon">⬆</div>
<div v-if="!state.selectedFile" class="upload-title">点击选择或拖拽文件</div>
<div v-if="!state.selectedFile" class="upload-hint">支持 .stp / .step 格式，最大 100MB</div>
<div v-else class="upload-title">{{ state.selectedFile.name }}</div>
<div v-if="state.selectedFile" class="upload-hint">{{ formatFileSize(state.selectedFile.size) }}</div>
<div class="upload-formats">
<span class="format-tag">.stp</span>
<span class="format-tag">.step</span>
</div>
</label>
<button
class="btn btn-primary upload-btn"
:disabled="!state.selectedFile || state.uploading"
@click="uploadFile"
>
<span v-if="!state.uploading">🚀 开始分析</span>
<span v-else>⏳ 正在上传...</span>
</button>
<div class="flex gap-2 mt-4">
<button
v-if="state.selectedFile"
class="btn btn-secondary"
@click="clearFile"
>
清除
</button>
<button
class="btn btn-primary btn-full"
:disabled="!state.selectedFile || state.uploading"
@click="uploadFile"
>
<span v-if="state.uploading" class="loading-spinner"></span>
<span v-if="!state.uploading">开始分析</span>
<span v-else>上传中...</span>
</button>
</div>
<p v-if="state.error" class="error-message">{{ state.error }}</p>
</div>
<p v-if="state.error" class="badge badge-error mt-4">{{ state.error }}</p>
<!-- 当前进度 -->
<div v-if="state.currentTask" class="current-task-card">
<h4>📋 当前任务</h4>
<div class="task-info">
<div class="data-item">
<span class="data-label">任务 ID</span>
<span class="data-value">{{ state.currentTask.task_id }}</span>
</div>
<div class="data-item">
<span class="data-label">文件名</span>
<span class="data-value">{{ state.currentTask.filename || 'N/A' }}</span>
</div>
<div class="data-item">
<span class="data-label">文件大小</span>
<span class="data-value">{{ state.currentTask.file_size ? formatFileSize(state.currentTask.file_size) : 'N/A' }}</span>
</div>
<div class="data-item">
<span class="data-label">状态</span>
<span class="status-badge" :class="getStatusClass(state.currentTask.status)">
<div v-if="state.currentTask" class="mt-6">
<div class="flex items-center justify-between mb-2">
<span class="text-secondary">当前任务</span>
<span :class="['badge', getStatusClass(state.currentTask.status)]">
{{ statusText(state.currentTask.status) }}
</span>
</div>
</div>
<div v-if="state.polling" class="progress-container">
<div class="progress-bar">
<div class="progress-fill" :style="{ width: state.progress + '%' }"></div>
</div>
<p class="progress-text">正在后台分析，请稍候...</p>
<div class="text-muted text-sm mt-2">{{ state.currentTask.filename }}</div>
</div>
</div>
</div>
<!-- 项目总览 -->
<div class="card summary-card">
<h2>
<span class="card-icon">📊</span>
项目总览
</h2>
<div v-if="latestFile" class="latest-file">
<h4>最近上传文件</h4>
<div class="file-preview">
<span class="file-icon">📄</span>
<div class="file-details">
<div class="card">
<div class="card-header">
<div class="card-title">
<div class="card-title-icon">📊</div>
项目总览
</div>
</div>
<div class="card-body">
<div v-if="latestFile" class="file-item">
<div class="file-icon">📄</div>
<div class="file-info">
<div class="file-name">{{ latestFile.filename }}</div>
<div class="file-meta">
<span>📅 {{ formatDateTime(latestFile.last_upload) }}</span>
<span>📊 {{ latestFile.record_count }} 条记录</span>
<span>{{ latestFile.record_count }} 条记录</span>
<span>{{ formatDateTime(latestFile.last_upload) }}</span>
</div>
</div>
</div>
</div>
<div v-else class="empty-state">
<div class="empty-state-icon">📁</div>
<h3>暂无历史记录</h3>
<p>上传一个 STP 文件开始分析吧</p>
</div>
<div v-else class="empty-state">
<div class="empty-icon">📁</div>
<div class="empty-title">暂无历史记录</div>
<div class="empty-description">上传一个 STP 文件开始分析</div>
</div>
<router-link class="btn btn-secondary link-btn" to="/history">
查看详细历史记录 →
</router-link>
<router-link class="btn btn-secondary btn-full mt-6" to="/history">
查看历史记录
</router-link>
</div>
</div>
</div>
</div>
`,
};
// 历史记录视图
const HistoryView = {
setup() {
const router = useRouter();
@@ -613,73 +597,72 @@ const HistoryView = {
};
},
template: `
<div class="history-view">
<h2>
<span class="card-icon">📋</span>
历史记录
</h2>
<p class="card-subtitle">按文件名聚合展示所有上传与分析任务。</p>
<div v-if="loading" class="loading">
<div class="spinner"></div>
<p class="loading-text">正在加载历史记录...</p>
<div>
<div class="result-header">
<div class="result-title">
📋 历史记录
</div>
</div>
<p v-if="error" class="error-message">{{ error }}</p>
<div v-if="loading" class="flex items-center justify-center gap-4" style="padding: 4rem;">
<div class="loading-spinner"></div>
<span class="text-secondary">加载中...</span>
</div>
<p v-if="error" class="badge badge-error">{{ error }}</p>
<div v-if="!loading && files.length === 0 && !error" class="empty-state">
<div class="empty-state-icon">📁</div>
<h3>暂无历史记录</h3>
<p>先在仪表盘上传一个文件吧。</p>
<div class="empty-icon">📁</div>
<div class="empty-title">暂无历史记录</div>
<div class="empty-description">上传文件后这里会显示分析历史</div>
</div>
<TransitionGroup name="list" tag="div" class="file-list" v-if="files.length">
<div
v-for="file in files"
:key="file.filename"
class="file-card"
:class="{ expanded: expanded[file.filename] }"
class="card"
style="margin-bottom: var(--space-4);"
>
<div class="file-header" @click="toggleExpand(file.filename)">
<div class="file-info">
<div class="file-name">📄 {{ file.filename }}</div>
<div class="file-name">{{ file.filename }}</div>
<div class="file-meta">
总记录：{{ file.record_count }} 条
<span v-if="file.last_upload"> | 最近上传：{{ formatDateTime(file.last_upload) }}</span>
{{ file.record_count }} 条记录 · {{ formatDateTime(file.last_upload) }}
</div>
</div>
<button class="btn btn-secondary expand-btn">
<button class="btn btn-ghost">
{{ expanded[file.filename] ? '收起' : '展开' }}
</button>
</div>
<transition name="expand">
<div class="record-list" v-if="expanded[file.filename]">
<div v-if="!file.records" class="loading">
<div class="spinner"></div>
<p class="loading-text">正在加载记录...</p>
<transition name="slide-up">
<div v-if="expanded[file.filename]" style="padding: var(--space-4); border-top: 1px solid var(--border-light);">
<div v-if="!file.records" class="flex items-center justify-center gap-2">
<div class="loading-spinner"></div>
<span class="text-secondary">加载中...</span>
</div>
<div v-else-if="file.records.length === 0" class="empty-state">
<p>暂无详细记录</p>
<div v-else-if="file.records.length === 0" class="text-center text-muted">
暂无详细记录
</div>
<TransitionGroup name="list" tag="div" v-else>
<TransitionGroup name="list" tag="div" v-else class="file-list">
<div
v-for="record in file.records"
:key="record.task_id"
class="record-item"
class="file-item"
@click="openResult(record.task_id)"
>
<div class="record-header">
<span class="record-date">📅 {{ formatDateTime(record.upload_time) }}</span>
<span class="status-badge" :class="'status-' + record.status">
{{ statusText(record.status) }}
</span>
</div>
<div class="record-meta">
<span>任务 ID：{{ record.task_id }}</span>
<span>文件大小：{{ formatFileSize(record.file_size) }}</span>
<span v-if="record.completed_at">完成时间：{{ formatDateTime(record.completed_at) }}</span>
<div class="file-icon">📊</div>
<div class="file-info">
<div class="file-name">{{ record.task_id.slice(0, 8) }}...</div>
<div class="file-meta">
<span>{{ formatDateTime(record.upload_time) }}</span>
<span>{{ formatFileSize(record.file_size) }}</span>
</div>
</div>
<span :class="['badge', record.status === 'completed' ? 'badge-success' : record.status === 'failed' ? 'badge-error' : 'badge-warning']">
{{ statusText(record.status) }}
</span>
</div>
</TransitionGroup>
</div>
@@ -690,7 +673,6 @@ const HistoryView = {
`,
};
// 结果详情视图
const ResultView = {
setup() {
const route = useRoute();
@@ -736,232 +718,159 @@ const ResultView = {
};
},
template: `
<div class="result-view">
<h2>
<span class="card-icon">📊</span>
分析结果详情
</h2>
<div v-if="loading" class="loading">
<div class="spinner"></div>
<p class="loading-text">正在加载任务 {{ taskId }} 的分析结果...</p>
<div>
<div class="result-header">
<div class="result-title">
📊 分析结果
</div>
<router-link class="btn btn-secondary" to="/">返回仪表盘</router-link>
</div>
<p v-if="error" class="error-message">{{ error }}</p>
<div v-if="loading" class="flex items-center justify-center gap-4" style="padding: 4rem;">
<div class="loading-spinner"></div>
<span class="text-secondary">加载中...</span>
</div>
<div v-if="task && !loading" class="result-layout">
<!-- 任务信息卡片 -->
<section class="result-card task-card">
<h3>📝 任务信息</h3>
<div class="task-info">
<div class="data-item">
<span class="data-label">任务 ID</span>
<span class="data-value">{{ task.task_id || 'N/A' }}</span>
<p v-if="error" class="badge badge-error">{{ error }}</p>
<div v-if="task && !loading">
<div class="card mb-6">
<div class="card-header">
<div class="card-title">
<div class="card-title-icon">📝</div>
任务信息
</div>
<div class="data-item">
<span class="data-label">文件名</span>
<span class="data-value">{{ task.filename || 'N/A' }}</span>
<span :class="['badge', task.status === 'completed' ? 'badge-success' : task.status === 'failed' ? 'badge-error' : 'badge-info']">
{{ statusText(task.status) }}
</span>
</div>
<div class="card-body">
<div class="grid-2">
<div class="file-item">
<div class="file-icon">📄</div>
<div class="file-info">
<div class="file-name">{{ task.filename || 'N/A' }}</div>
<div class="file-meta">文件名</div>
</div>
</div>
<div class="file-item">
<div class="file-icon">💾</div>
<div class="file-info">
<div class="file-name">{{ task.file_size ? formatFileSize(task.file_size) : 'N/A' }}</div>
<div class="file-meta">文件大小</div>
</div>
</div>
<div class="file-item">
<div class="file-icon">🆔</div>
<div class="file-info">
<div class="file-name font-mono">{{ task.task_id }}</div>
<div class="file-meta">任务 ID</div>
</div>
</div>
<div class="file-item">
<div class="file-icon">📅</div>
<div class="file-info">
<div class="file-name">{{ task.upload_time ? formatDateTime(task.upload_time) : 'N/A' }}</div>
<div class="file-meta">上传时间</div>
</div>
</div>
</div>
<div class="data-item">
<span class="data-label">文件大小</span>
<span class="data-value">{{ task.file_size ? formatFileSize(task.file_size) : 'N/A' }}</span>
</div>
<div class="data-item">
<span class="data-label">状态</span>
<span class="status-badge" :class="'status-' + task.status">
{{ statusText(task.status) }}
</span>
</div>
<div class="data-item">
<span class="data-label">上传时间</span>
<span class="data-value">{{ task.upload_time ? formatDateTime(task.upload_time) : 'N/A' }}</span>
</div>
<div class="data-item">
<span class="data-label">完成时间</span>
<span class="data-value">{{ task.completed_at ? formatDateTime(task.completed_at) : 'N/A' }}</span>
<div v-if="task.error" class="badge badge-error mt-4">
错误: {{ task.error }}
</div>
</div>
<div v-if="task.error" class="error-message">
<strong>错误信息：</strong>{{ task.error }}
</div>
</section>
</div>
<!-- 几何属性 -->
<section class="grid-3">
<div class="result-grid">
<div class="result-card">
<h3>📐 几何属性</h3>
<div v-if="geometry" class="geometry-data">
<div class="data-item">
<span class="data-label">体积</span>
<span class="data-value">
{{ geometry.volume ? formatNumber(geometry.volume) : 'N/A' }}
<span class="data-unit">mm³</span>
</span>
<div class="result-card-header">
<div class="result-card-icon" style="background: var(--primary-50); color: var(--primary-600);">📐</div>
<div class="result-card-title">几何属性</div>
</div>
<div v-if="geometry" class="result-card-value">
<div class="mb-4">
<div class="text-muted text-sm">体积</div>
<div>{{ geometry.volume ? formatNumber(geometry.volume) : 'N/A' }} mm³</div>
</div>
<div class="data-item">
<span class="data-label">表面积</span>
<span class="data-value">
{{ geometry.surface_area ? formatNumber(geometry.surface_area) : 'N/A' }}
<span class="data-unit">mm²</span>
</span>
</div>
<div class="data-item">
<span class="data-label">体积/面积比</span>
<span class="data-value">
{{
geometry.volume && geometry.surface_area
? (geometry.volume / geometry.surface_area).toFixed(4)
: 'N/A'
}}
</span>
<div class="mb-4">
<div class="text-muted text-sm">表面积</div>
<div>{{ geometry.surface_area ? formatNumber(geometry.surface_area) : 'N/A' }} mm²</div>
</div>
</div>
<div v-else class="empty-state">
<p>无几何数据</p>
</div>
<div v-else class="text-muted">无几何数据</div>
</div>
<div class="result-card">
<h3>📦 边界框</h3>
<div v-if="geometry?.bounding_box" class="bounding-box-data">
<div class="data-item coordinate-item">
<span class="data-label">尺寸 (mm)</span>
<span class="data-value">
<div class="result-card-header">
<div class="result-card-icon" style="background: var(--accent-50); color: var(--accent-600);">📦</div>
<div class="result-card-title">边界框</div>
</div>
<div v-if="geometry?.bounding_box" class="result-card-value">
<div class="mb-4">
<div class="text-muted text-sm">尺寸</div>
<div>
{{ geometry.bounding_box.dimensions[0].toFixed(2) }} ×
{{ geometry.bounding_box.dimensions[1].toFixed(2) }} ×
{{ geometry.bounding_box.dimensions[2].toFixed(2) }}
</span>
</div>
<div class="data-item coordinate-item">
<span class="data-label">最小坐标</span>
<span class="data-value coordinate-value">
X: {{ geometry.bounding_box.min[0].toFixed(2) }},
Y: {{ geometry.bounding_box.min[1].toFixed(2) }},
Z: {{ geometry.bounding_box.min[2].toFixed(2) }}
</span>
</div>
<div class="data-item coordinate-item">
<span class="data-label">最大坐标</span>
<span class="data-value coordinate-value">
X: {{ geometry.bounding_box.max[0].toFixed(2) }},
Y: {{ geometry.bounding_box.max[1].toFixed(2) }},
Z: {{ geometry.bounding_box.max[2].toFixed(2) }}
</span>
{{ geometry.bounding_box.dimensions[2].toFixed(2) }} mm
</div>
</div>
</div>
<div v-else class="empty-state">
<p>无边界框数据</p>
</div>
<div v-else class="text-muted">无边界框数据</div>
</div>
<div class="result-card">
<h3>🔺 拓扑结构</h3>
<div v-if="geometry?.topology" class="topology-data">
<div class="data-item">
<span class="data-label">面数</span>
<span class="data-value">{{ geometry.topology.faces || 0 }}</span>
</div>
<div class="data-item">
<span class="data-label">边数</span>
<span class="data-value">{{ geometry.topology.edges || 0 }}</span>
</div>
<div class="data-item">
<span class="data-label">顶点数</span>
<span class="data-value">{{ geometry.topology.vertices || 0 }}</span>
<div class="result-card-header">
<div class="result-card-icon" style="background: var(--warning-bg); color: var(--warning);">🔺</div>
<div class="result-card-title">拓扑结构</div>
</div>
<div v-if="geometry?.topology" class="result-card-value">
<div class="mb-4">
<div class="text-muted text-sm">面 / 边 / 顶点</div>
<div>{{ geometry.topology.faces || 0 }} / {{ geometry.topology.edges || 0 }} / {{ geometry.topology.vertices || 0 }}</div>
</div>
</div>
<div v-else class="empty-state">
<p>无拓扑数据</p>
</div>
<div v-else class="text-muted">无拓扑数据</div>
</div>
</section>
</div>
<!-- 模具工艺信息 -->
<section class="grid-2">
<div class="result-card">
<h3>🔧 模具 / 工艺关键信息</h3>
<div v-if="keyInfo" class="metrics-data">
<div class="data-item">
<span class="data-label">收缩率</span>
<span class="data-value">{{ keyInfo.metadata?.shrinkage_rate ?? 'N/A' }}</span>
</div>
<div class="data-item">
<span class="data-label">拔模角</span>
<span class="data-value">
{{ keyInfo.metadata?.draft_angle !== undefined ? keyInfo.metadata.draft_angle + '°' : 'N/A' }}
</span>
</div>
<div class="data-item">
<span class="data-label">预估夹紧力</span>
<span class="data-value">{{ keyInfo.manufacturing_info?.estimated_clamping_force || 'N/A' }}</span>
</div>
<div class="data-item">
<span class="data-label">模具尺寸 (mm)</span>
<span class="data-value">
{{
keyInfo.manufacturing_info?.estimated_mold_size
? keyInfo.manufacturing_info.estimated_mold_size.length +
' × ' +
keyInfo.manufacturing_info.estimated_mold_size.width +
' × ' +
keyInfo.manufacturing_info.estimated_mold_size.height
: 'N/A'
}}
</span>
</div>
<div class="data-item">
<span class="data-label">产品重量</span>
<span class="data-value">
{{ keyInfo.mold_cavities?.cavity_key_info?.geometric_characteristics?.product_weight || 'N/A' }}
</span>
</div>
<div class="data-item">
<span class="data-label">壁厚范围</span>
<span class="data-value">
{{ keyInfo.mold_cavities?.cavity_key_info?.geometric_characteristics?.wall_thickness_range || 'N/A' }}
</span>
</div>
<div class="data-item">
<span class="data-label">预估成型周期</span>
<span class="data-value">{{ keyInfo.manufacturing_info?.estimated_cycle_time || 'N/A' }}</span>
</div>
</div>
<div v-else class="empty-state">
<p>无型腔 / 工艺数据</p>
<div v-if="keyInfo" class="card mt-6">
<div class="card-header">
<div class="card-title">
<div class="card-title-icon">🔧</div>
工艺参数
</div>
</div>
<div class="result-card">
<h3>🧱 网格摘要</h3>
<div v-if="meshSummary" class="metrics-data">
<div class="data-item">
<span class="data-label">网格质量等级</span>
<span class="data-value">{{ meshSummary.quality }}</span>
<div class="card-body">
<div class="grid-2">
<div class="file-item" v-if="keyInfo.metadata?.shrinkage_rate">
<div class="file-icon">📉</div>
<div class="file-info">
<div class="file-name">{{ keyInfo.metadata.shrinkage_rate }}</div>
<div class="file-meta">收缩率</div>
</div>
</div>
<div class="data-item">
<span class="data-label">顶点数</span>
<span class="data-value">{{ meshSummary.vertex_count }}</span>
<div class="file-item" v-if="keyInfo.metadata?.draft_angle !== undefined">
<div class="file-icon">📐</div>
<div class="file-info">
<div class="file-name">{{ keyInfo.metadata.draft_angle }}°</div>
<div class="file-meta">拔模角</div>
</div>
</div>
<div class="data-item">
<span class="data-label">面数</span>
<span class="data-value">{{ meshSummary.face_count }}</span>
<div class="file-item" v-if="keyInfo.manufacturing_info?.estimated_clamping_force">
<div class="file-icon">💪</div>
<div class="file-info">
<div class="file-name">{{ keyInfo.manufacturing_info.estimated_clamping_force }}</div>
<div class="file-meta">预估夹紧力</div>
</div>
</div>
<div class="data-item">
<span class="data-label">点云采样点数</span>
<span class="data-value">{{ meshSummary.point_count ?? 'N/A' }}</span>
</div>
</div>
<div v-else class="empty-state">
<p>当前任务未生成网格摘要</p>
</div>
</div>
</section>
</div>
</div>
</div>
`,
};
// 路由配置
const routes = [
{ path: "/", component: DashboardView },
{ path: "/history", component: HistoryView },
@@ -973,5 +882,6 @@ const router = createRouter({
routes,
});
// 挂载应用
createApp(App).use(router).mount("#app");
const app = createApp(App);
app.use(router);
app.mount("#app");