3d：登录页与首页标题前新增 logo，logo 与标题统一为 #2E7CF6

3d/frontend/src/components/LoginView.vue

@@ -2,10 +2,16 @@
 import { reactive, ref, watch } from 'vue'
 
 import { login } from '../api/auth'
+import logo from '../assets/logo.png'
 
 const props = defineProps<{ prefillUsername?: string; prefillPassword?: string }>()
 const emit = defineEmits<{ (event: 'success'): void }>()
 
+const logoStyle = {
+  maskImage: `url(${logo})`,
+  WebkitMaskImage: `url(${logo})`,
+}
+
 const form = reactive({
   username: props.prefillUsername ?? '',
   password: props.prefillPassword ?? '',
@@ -37,6 +43,7 @@ async function submit(): Promise<void> {
 <template>
   <div class="login-shell">
     <div class="login-card">
+      <span class="login-logo" :style="logoStyle" />
       <h1 class="login-title">压缩机故障预测模型</h1>
       <p class="login-hint">请登录后继续使用</p>
       <a-input
@@ -77,9 +84,22 @@ async function submit(): Promise<void> {
   border: 1px solid #333a45;
   border-radius: 12px;
 }
+.login-logo {
+  display: block;
+  align-self: center;
+  height: 56px;
+  width: 108px;
+  background-color: #2e7cf6;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-position: center;
+  mask-position: center;
+}
 .login-title {
   font-size: 20px;
-  color: #fff;
+  color: #2e7cf6;
   margin: 0;
   text-align: center;
 }

3d/frontend/src/components/TopBar.vue

@@ -4,12 +4,18 @@ import { Modal, message } from 'ant-design-vue'
 import { ref } from 'vue'
 
 import { logout } from '../api/auth'
+import logo from '../assets/logo.png'
 import { useAlarmsStore } from '../stores/alarms'
 import { useModelStore } from '../stores/model'
 import { useScenesStore } from '../stores/scenes'
 import { useViewerStore } from '../stores/viewer'
 import type { ScenePosition } from '../types'
 
+const logoStyle = {
+  maskImage: `url(${logo})`,
+  WebkitMaskImage: `url(${logo})`,
+}
+
 const modelStore = useModelStore()
 const viewerStore = useViewerStore()
 const scenesStore = useScenesStore()
@@ -73,7 +79,10 @@ function removeFromRename(): void {
 
 <template>
   <header class="topbar">
-    <h1 class="title">压缩机故障预测模型</h1>
+    <div class="brand">
+      <span class="logo" :style="logoStyle" />
+      <h1 class="title">压缩机故障预测模型</h1>
+    </div>
     <div class="field">
       <span class="label">模型</span>
       <a-select
@@ -139,13 +148,34 @@ function removeFromRename(): void {
   position: relative;
   font-size: 12px;
 }
+.brand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 300px;
+  flex: 0 0 auto;
+}
+.logo {
+  display: block;
+  flex: 0 0 auto;
+  height: 30px;
+  width: 58px;
+  background-color: #2e7cf6;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-position: center;
+  mask-position: center;
+}
 .title {
   font-size: 23px;
   font-weight: 600;
   line-height: 1;
-  width: 300px;
   margin: 0;
-  text-align: center;
+  white-space: nowrap;
+  color: #2e7cf6;
 }
 /* 顶部除标题外统一 12px（含 antd 控件） */
 .topbar :deep(.ant-select),