feat(desktop): add type declaration for @brand-logo alias in brand-logo.d.ts

apps/desktop-client/src/renderer/brand-logo.d.ts

@@ -0,0 +1,7 @@
+// Type for the `@brand-logo` alias (electron.vite.config.ts → public/logo.svg).
+// Kept in its own ambient (non-module) declaration file so vue-tsc resolves the
+// alias the same way Vite does at build time.
+declare module '@brand-logo' {
+  const src: string
+  export default src
+}

apps/desktop-client/src/renderer/components/DesktopShell.vue

@@ -11,6 +11,7 @@ import {
 import { computed, onMounted, ref, watch } from 'vue'
 import { RouterLink, RouterView, useRoute } from 'vue-router'
 
+import brandLogo from '@brand-logo'
 import { useClientRelease } from '../composables/useClientRelease'
 import { useDesktopRuntime } from '../composables/useDesktopRuntime'
 import { useDesktopSession } from '../composables/useDesktopSession'
@@ -232,8 +233,7 @@ watch(
     <aside class="sidebar">
       <div class="brand-block">
         <div class="brand-mark">
-          <span class="brand-ring"></span>
-          <span class="brand-core"></span>
+          <img :src="brandLogo" alt="省心推" class="brand-mark-img" />
         </div>
         <div>
           <p class="eyebrow">Workspace Cockpit</p>
@@ -444,30 +444,19 @@ watch(
 }
 
 .brand-mark {
-  position: relative;
   width: 40px;
   height: 40px;
   display: grid;
   place-items: center;
+  border-radius: 11px;
+  background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
+  box-shadow: 0 6px 14px rgba(22, 119, 255, 0.28);
 }
 
-.brand-ring,
-.brand-core {
-  position: absolute;
-  border-radius: 50%;
-}
-
-.brand-ring {
-  inset: 0;
-  border: 1px solid #91caff;
-  background: #e6f4ff;
-}
-
-.brand-core {
-  width: 16px;
-  height: 16px;
-  background: #1677ff;
-  box-shadow: 0 2px 6px rgba(22, 119, 255, 0.4);
+.brand-mark-img {
+  width: 62%;
+  height: 62%;
+  object-fit: contain;
 }
 
 .eyebrow {

apps/desktop-client/src/renderer/main.ts

@@ -2,6 +2,7 @@ import './console-guard'
 
 import { createApp } from 'vue'
 
+import brandLogo from '@brand-logo'
 import type { DesktopObservedRequest } from '../shared/network-debug'
 import App from './App.vue'
 import { router } from './routes'
@@ -9,6 +10,13 @@ import { router } from './routes'
 import 'ant-design-vue/dist/reset.css'
 import '../../../../packages/ui-shared/src/tokens/index.css'
 
+// Point the favicon at the real brand mark; the inline SVG in index.html is a
+// pre-mount fallback.
+const favicon = document.querySelector<HTMLLinkElement>('link[rel="icon"]')
+if (favicon) {
+  favicon.href = brandLogo
+}
+
 const applyTheme = (prefersDark: boolean) => {
   document.documentElement.dataset.theme = prefersDark ? 'dark' : 'light'
 }

apps/desktop-client/src/renderer/views/LoginView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
+import brandLogo from '@brand-logo'
 import { DEFAULT_API_BASE_URL, useDesktopSession } from '../composables/useDesktopSession'
 
 const { apiBaseURL, error, pending, setApiBaseURL, login } = useDesktopSession()
@@ -179,7 +180,7 @@ onBeforeUnmount(() => {
     <div class="auth-wrapper">
       <header class="brand-header">
         <div class="brand-logo">
-          <span class="brand-core"></span>
+          <img :src="brandLogo" alt="省心推" class="brand-logo-img" />
         </div>
         <h1 class="brand-name">省心推</h1>
       </header>
@@ -448,21 +449,10 @@ onBeforeUnmount(() => {
     inset 0 1px 0 rgba(255, 255, 255, 0.35);
 }
 
-.brand-core {
-  width: 26px;
-  height: 26px;
-  border-radius: 8px;
-  background: #ffffff;
-  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.25);
-  position: relative;
-}
-
-.brand-core::after {
-  content: '';
-  position: absolute;
-  inset: 7px;
-  border-radius: 3px;
-  background: linear-gradient(135deg, #1677ff, #69b1ff);
+.brand-logo-img {
+  width: 60%;
+  height: 60%;
+  object-fit: contain;
 }
 
 .brand-name {