888 lines
28 KiB
JavaScript
888 lines
28 KiB
JavaScript
/**
|
||
* STP模具几何分析中心 - Vue3单页应用
|
||
* 版本: 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: 'modern'
|
||
});
|
||
|
||
function formatFileSize(bytes) {
|
||
if (!bytes || bytes === 0) return "0 B";
|
||
const k = 1024;
|
||
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];
|
||
}
|
||
|
||
function formatNumber(num) {
|
||
if (num === null || num === undefined) return "N/A";
|
||
if (num >= 1_000_000) return (num / 1_000_000).toFixed(2) + "M";
|
||
if (num >= 1_000) return (num / 1_000).toFixed(2) + "K";
|
||
return num.toFixed ? num.toFixed(2) : String(num);
|
||
}
|
||
|
||
function formatDateTime(dateString) {
|
||
if (!dateString) return "N/A";
|
||
try {
|
||
return new Date(dateString).toLocaleString('zh-CN');
|
||
} catch {
|
||
return dateString;
|
||
}
|
||
}
|
||
|
||
function statusText(status) {
|
||
const map = {
|
||
pending: "排队中",
|
||
processing: "处理中",
|
||
completed: "已完成",
|
||
failed: "失败",
|
||
};
|
||
return map[status] || status || "未知";
|
||
}
|
||
|
||
function getStatusClass(status) {
|
||
const classMap = {
|
||
pending: "badge-warning",
|
||
processing: "badge-info",
|
||
completed: "badge-success",
|
||
failed: "badge-error"
|
||
};
|
||
return classMap[status] || "badge-neutral";
|
||
}
|
||
|
||
let notificationId = 0;
|
||
|
||
function addNotification(message, type = 'info') {
|
||
const id = ++notificationId;
|
||
const notification = {
|
||
id,
|
||
message,
|
||
type,
|
||
timestamp: new Date(),
|
||
visible: true
|
||
};
|
||
appState.notifications.push(notification);
|
||
|
||
setTimeout(() => {
|
||
const index = appState.notifications.findIndex(n => n.id === id);
|
||
if (index > -1) {
|
||
appState.notifications[index].visible = false;
|
||
setTimeout(() => {
|
||
const idx = appState.notifications.findIndex(n => n.id === id);
|
||
if (idx > -1) {
|
||
appState.notifications.splice(idx, 1);
|
||
}
|
||
}, 300);
|
||
}
|
||
}, 5000);
|
||
}
|
||
|
||
function handleApiError(error, context = '') {
|
||
console.error(`API错误 [${context}]:`, error);
|
||
const message = error.message || '请求失败，请稍后重试';
|
||
addNotification(message, 'error');
|
||
return message;
|
||
}
|
||
|
||
const App = {
|
||
setup() {
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
|
||
const isActive = (pathPrefix) =>
|
||
computed(() => route.path === pathPrefix || route.path.startsWith(pathPrefix));
|
||
|
||
const loadHealth = async () => {
|
||
try {
|
||
const res = await fetch("/health", { method: "POST" });
|
||
if (res.ok) {
|
||
appState.health = await res.json();
|
||
}
|
||
} catch (error) {
|
||
appState.health = null;
|
||
}
|
||
};
|
||
|
||
const dismissNotification = (id) => {
|
||
const index = appState.notifications.findIndex(n => n.id === id);
|
||
if (index > -1) {
|
||
appState.notifications[index].visible = false;
|
||
setTimeout(() => {
|
||
const idx = appState.notifications.findIndex(n => n.id === id);
|
||
if (idx > -1) {
|
||
appState.notifications.splice(idx, 1);
|
||
}
|
||
}, 300);
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
loadHealth();
|
||
setInterval(loadHealth, 30000);
|
||
});
|
||
|
||
return {
|
||
route,
|
||
router,
|
||
appState,
|
||
isActive,
|
||
dismissNotification,
|
||
getStatusClass,
|
||
statusText
|
||
};
|
||
},
|
||
template: `
|
||
<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]"
|
||
>
|
||
<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="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>
|
||
</header>
|
||
|
||
<main class="main-content">
|
||
<router-view v-slot="{ Component }">
|
||
<transition name="fade" mode="out-in">
|
||
<component :is="Component" />
|
||
</transition>
|
||
</router-view>
|
||
</main>
|
||
|
||
<footer class="app-footer">
|
||
<div class="footer-content">
|
||
<span class="footer-item">
|
||
<span class="footer-label">PythonOCC:</span>
|
||
<strong>{{ appState.health?.pythonocc ? '可用' : '检测中...' }}</strong>
|
||
</span>
|
||
<span class="footer-divider"></span>
|
||
<span v-if="appState.health" class="footer-item">
|
||
<span class="footer-label">任务数:</span>
|
||
<strong>{{ appState.health.total_tasks }}</strong>
|
||
</span>
|
||
<span class="footer-divider"></span>
|
||
<span class="footer-item">版本 5.0.0</span>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
`,
|
||
};
|
||
|
||
const DashboardView = {
|
||
setup() {
|
||
const router = useRouter();
|
||
|
||
const state = reactive({
|
||
selectedFile: null,
|
||
uploading: false,
|
||
error: "",
|
||
currentTask: null,
|
||
polling: false,
|
||
historySummary: null,
|
||
dragOver: false,
|
||
progress: 0
|
||
});
|
||
|
||
const totalFiles = computed(() => state.historySummary?.total_files || 0);
|
||
const totalRecords = computed(() =>
|
||
(state.historySummary?.files || []).reduce(
|
||
(sum, f) => sum + (f.record_count || 0),
|
||
0
|
||
)
|
||
);
|
||
const latestFile = computed(() =>
|
||
(state.historySummary?.files || [])[0] || null
|
||
);
|
||
|
||
const handleFileChange = (event) => {
|
||
const file = event.target.files[0];
|
||
if (!file) return;
|
||
validateAndSelectFile(file);
|
||
};
|
||
|
||
const validateAndSelectFile = (file) => {
|
||
if (!file.name.toLowerCase().endsWith(".stp") &&
|
||
!file.name.toLowerCase().endsWith(".step")) {
|
||
state.error = "请选择 STP 或 STEP 格式文件";
|
||
state.selectedFile = null;
|
||
return;
|
||
}
|
||
if (file.size > 100 * 1024 * 1024) {
|
||
state.error = "文件大小不能超过 100MB";
|
||
state.selectedFile = null;
|
||
return;
|
||
}
|
||
|
||
state.error = "";
|
||
state.selectedFile = file;
|
||
addNotification(`已选择文件: ${file.name}`, 'success');
|
||
};
|
||
|
||
const handleDragOver = (event) => {
|
||
event.preventDefault();
|
||
state.dragOver = true;
|
||
};
|
||
|
||
const handleDragLeave = (event) => {
|
||
event.preventDefault();
|
||
state.dragOver = false;
|
||
};
|
||
|
||
const handleDrop = (event) => {
|
||
event.preventDefault();
|
||
state.dragOver = false;
|
||
const files = event.dataTransfer.files;
|
||
if (files.length > 0) {
|
||
validateAndSelectFile(files[0]);
|
||
}
|
||
};
|
||
|
||
const uploadFile = async () => {
|
||
if (!state.selectedFile) return;
|
||
state.uploading = true;
|
||
state.error = "";
|
||
state.progress = 0;
|
||
|
||
const formData = new FormData();
|
||
formData.append("file", state.selectedFile);
|
||
|
||
try {
|
||
const res = await fetch("/upload", {
|
||
method: "POST",
|
||
body: formData,
|
||
});
|
||
if (!res.ok) {
|
||
throw new Error(`上传失败: ${res.status} ${res.statusText}`);
|
||
}
|
||
const data = await res.json();
|
||
state.currentTask = {
|
||
task_id: data.task_id,
|
||
status: "processing",
|
||
filename: data.file_info?.filename,
|
||
file_size: data.file_info?.size,
|
||
};
|
||
addNotification(`文件上传成功，开始分析...`, 'success');
|
||
startPolling(data.task_id);
|
||
} catch (e) {
|
||
const errorMsg = handleApiError(e, '文件上传');
|
||
state.error = errorMsg;
|
||
} finally {
|
||
state.uploading = false;
|
||
}
|
||
};
|
||
|
||
const startPolling = async (taskId) => {
|
||
state.polling = true;
|
||
state.progress = 10;
|
||
let pollCount = 0;
|
||
const maxPolls = 300;
|
||
|
||
const poll = async () => {
|
||
try {
|
||
pollCount++;
|
||
state.progress = Math.min(90, 10 + pollCount * 0.5);
|
||
|
||
const res = await fetch(`/status/${taskId}`, { method: "POST" });
|
||
|
||
if (res.status === 404) {
|
||
state.polling = false;
|
||
state.error = "任务不存在或已被删除";
|
||
addNotification("任务不存在或已被删除", 'error');
|
||
return;
|
||
}
|
||
|
||
if (!res.ok) {
|
||
throw new Error(`查询任务状态失败: ${res.status} ${res.statusText}`);
|
||
}
|
||
|
||
const task = await res.json();
|
||
state.currentTask = task;
|
||
|
||
if (task.status === "completed") {
|
||
state.polling = false;
|
||
state.progress = 100;
|
||
addNotification(`分析完成，正在跳转...`, 'success');
|
||
setTimeout(() => {
|
||
router.push(`/result/${task.task_id}`);
|
||
}, 1000);
|
||
} else if (task.status === "failed") {
|
||
state.polling = false;
|
||
state.progress = 0;
|
||
const errorMsg = task.error || "未知错误";
|
||
state.error = `分析失败: ${errorMsg}`;
|
||
addNotification(`分析失败: ${errorMsg}`, 'error');
|
||
} else if (pollCount >= maxPolls) {
|
||
state.polling = false;
|
||
state.progress = 0;
|
||
state.error = "任务处理超时，请稍后查看结果";
|
||
addNotification("任务处理超时", 'warning');
|
||
} else {
|
||
setTimeout(poll, 1000);
|
||
}
|
||
} catch (e) {
|
||
state.polling = false;
|
||
state.progress = 0;
|
||
const errorMsg = handleApiError(e, '任务轮询');
|
||
state.error = errorMsg;
|
||
}
|
||
};
|
||
poll();
|
||
};
|
||
|
||
const loadHistorySummary = async () => {
|
||
try {
|
||
const res = await fetch("/api/history", { method: "POST" });
|
||
if (res.ok) {
|
||
state.historySummary = await res.json();
|
||
}
|
||
} catch (e) {
|
||
state.historySummary = null;
|
||
}
|
||
};
|
||
|
||
const clearFile = () => {
|
||
state.selectedFile = null;
|
||
state.error = "";
|
||
};
|
||
|
||
onMounted(() => {
|
||
loadHistorySummary();
|
||
});
|
||
|
||
return {
|
||
state,
|
||
totalFiles,
|
||
totalRecords,
|
||
latestFile,
|
||
handleFileChange,
|
||
handleDragOver,
|
||
handleDragLeave,
|
||
handleDrop,
|
||
uploadFile,
|
||
clearFile,
|
||
formatFileSize,
|
||
statusText,
|
||
formatDateTime,
|
||
getStatusClass
|
||
};
|
||
},
|
||
template: `
|
||
<div>
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-icon">📁</div>
|
||
<div class="stat-value">{{ totalFiles }}</div>
|
||
<div class="stat-label">已分析文件</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">📊</div>
|
||
<div class="stat-value">{{ totalRecords }}</div>
|
||
<div class="stat-label">处理记录</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">⚡</div>
|
||
<div class="stat-value">{{ state.polling ? '...' : '就绪' }}</div>
|
||
<div class="stat-label">系统状态</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">🎯</div>
|
||
<div class="stat-value">{{ latestFile ? '1' : '0' }}</div>
|
||
<div class="stat-label">最近文件</div>
|
||
</div>
|
||
</div>
|
||
|
||
<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-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-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>
|
||
|
||
<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="badge badge-error mt-4">{{ state.error }}</p>
|
||
|
||
<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 class="progress-bar">
|
||
<div class="progress-fill" :style="{ width: state.progress + '%' }"></div>
|
||
</div>
|
||
<div class="text-muted text-sm mt-2">{{ state.currentTask.filename }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<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>{{ latestFile.record_count }} 条记录</span>
|
||
<span>{{ formatDateTime(latestFile.last_upload) }}</span>
|
||
</div>
|
||
</div>
|
||
</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 btn-full mt-6" to="/history">
|
||
查看历史记录
|
||
</router-link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`,
|
||
};
|
||
|
||
const HistoryView = {
|
||
setup() {
|
||
const router = useRouter();
|
||
const files = ref([]);
|
||
const loading = ref(true);
|
||
const error = ref("");
|
||
const expanded = ref({});
|
||
|
||
const loadHistory = async () => {
|
||
loading.value = true;
|
||
error.value = "";
|
||
try {
|
||
const res = await fetch("/api/history", { method: "POST" });
|
||
if (!res.ok) throw new Error("获取历史记录失败");
|
||
const data = await res.json();
|
||
files.value = data.files || [];
|
||
} catch (e) {
|
||
error.value = e.message || "加载失败";
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
|
||
const toggleExpand = async (filename) => {
|
||
expanded.value[filename] = !expanded.value[filename];
|
||
if (expanded.value[filename]) {
|
||
const file = files.value.find((f) => f.filename === filename);
|
||
if (!file.records) {
|
||
try {
|
||
const res = await fetch(
|
||
`/api/history/${encodeURIComponent(filename)}`,
|
||
{ method: "POST" }
|
||
);
|
||
if (!res.ok) throw new Error("加载记录失败");
|
||
file.records = await res.json();
|
||
} catch (e) {
|
||
error.value = e.message || "加载记录失败";
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
const openResult = (taskId) => {
|
||
router.push(`/result/${taskId}`);
|
||
};
|
||
|
||
onMounted(loadHistory);
|
||
|
||
return {
|
||
files,
|
||
loading,
|
||
error,
|
||
expanded,
|
||
toggleExpand,
|
||
openResult,
|
||
formatFileSize,
|
||
formatDateTime,
|
||
statusText,
|
||
};
|
||
},
|
||
template: `
|
||
<div>
|
||
<div class="result-header">
|
||
<div class="result-title">
|
||
📋 历史记录
|
||
</div>
|
||
</div>
|
||
|
||
<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-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="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-meta">
|
||
{{ file.record_count }} 条记录 · {{ formatDateTime(file.last_upload) }}
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-ghost">
|
||
{{ expanded[file.filename] ? '收起' : '展开' }}
|
||
</button>
|
||
</div>
|
||
|
||
<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="text-center text-muted">
|
||
暂无详细记录
|
||
</div>
|
||
<TransitionGroup name="list" tag="div" v-else class="file-list">
|
||
<div
|
||
v-for="record in file.records"
|
||
:key="record.task_id"
|
||
class="file-item"
|
||
@click="openResult(record.task_id)"
|
||
>
|
||
<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>
|
||
</transition>
|
||
</div>
|
||
</TransitionGroup>
|
||
</div>
|
||
`,
|
||
};
|
||
|
||
const ResultView = {
|
||
setup() {
|
||
const route = useRoute();
|
||
const task = ref(null);
|
||
const loading = ref(true);
|
||
const error = ref("");
|
||
|
||
const taskId = computed(() => route.params.taskId);
|
||
|
||
const loadTask = async () => {
|
||
loading.value = true;
|
||
error.value = "";
|
||
try {
|
||
const res = await fetch(`/status/${taskId.value}`, { method: "POST" });
|
||
if (!res.ok) throw new Error("获取任务数据失败");
|
||
const data = await res.json();
|
||
task.value = data;
|
||
} catch (e) {
|
||
error.value = e.message || "加载失败";
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
|
||
const geometry = computed(() => task.value?.geometry_data || null);
|
||
const keyInfo = computed(() => task.value?.key_info || null);
|
||
const meshSummary = computed(() => task.value?.mesh_summary || null);
|
||
|
||
onMounted(loadTask);
|
||
|
||
return {
|
||
task,
|
||
loading,
|
||
error,
|
||
taskId,
|
||
geometry,
|
||
keyInfo,
|
||
meshSummary,
|
||
formatNumber,
|
||
formatFileSize,
|
||
formatDateTime,
|
||
statusText,
|
||
};
|
||
},
|
||
template: `
|
||
<div>
|
||
<div class="result-header">
|
||
<div class="result-title">
|
||
📊 分析结果
|
||
</div>
|
||
<router-link class="btn btn-secondary" to="/">返回仪表盘</router-link>
|
||
</div>
|
||
|
||
<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="task && !loading">
|
||
<div class="card mb-6">
|
||
<div class="card-header">
|
||
<div class="card-title">
|
||
<div class="card-title-icon">📝</div>
|
||
任务信息
|
||
</div>
|
||
<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 v-if="task.error" class="badge badge-error mt-4">
|
||
错误: {{ task.error }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="result-grid">
|
||
<div class="result-card">
|
||
<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="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="text-muted">无几何数据</div>
|
||
</div>
|
||
|
||
<div class="result-card">
|
||
<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) }} mm
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else class="text-muted">无边界框数据</div>
|
||
</div>
|
||
|
||
<div class="result-card">
|
||
<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="text-muted">无拓扑数据</div>
|
||
</div>
|
||
</div>
|
||
|
||
<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="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="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="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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`,
|
||
};
|
||
|
||
const routes = [
|
||
{ path: "/", component: DashboardView },
|
||
{ path: "/history", component: HistoryView },
|
||
{ path: "/result/:taskId", component: ResultView },
|
||
];
|
||
|
||
const router = createRouter({
|
||
history: createWebHistory(),
|
||
routes,
|
||
});
|
||
|
||
const app = createApp(App);
|
||
app.use(router);
|
||
app.mount("#app");
|