feat: add new brand logos

- Introduced icon-color.svg featuring a colorful gradient design.
- Added icon-with-title.svg that includes a title and multiple gradient elements.

apps/ops-web/src/layouts/AppShell.vue

@@ -1,9 +1,23 @@
 <template>
   <a-layout style="min-height: 100vh">
     <a-layout-sider v-model:collapsed="collapsed" collapsible breakpoint="lg" :trigger="null">
-      <div class="ops-brand">
-        <span v-if="!collapsed">省心推 · 运营</span>
-        <span v-else>SXT</span>
+      <div class="ops-brand" aria-label="省心推运营控制台">
+        <img
+          v-if="!collapsed"
+          class="ops-brand__logo ops-brand__logo--full"
+          src="/logos/icon-with-title.svg"
+          alt=""
+          aria-hidden="true"
+        />
+        <span v-if="!collapsed" class="ops-brand__badge">运营端</span>
+        <img
+          v-else
+          class="ops-brand__logo ops-brand__logo--icon"
+          src="/logos/icon-color.svg"
+          alt=""
+          aria-hidden="true"
+        />
+        <span v-if="collapsed" class="ops-brand__badge ops-brand__badge--compact">运</span>
       </div>
       <a-menu
         theme="light"
@@ -235,18 +249,65 @@ onMounted(() => {
 }
 
 .ops-brand {
-  height: 40px;
-  background: #eef2ff;
-  border: 1px solid #c7d2fe;
-  margin: 16px;
-  border-radius: 6px;
+  height: 38px;
+  margin: 14px 12px 18px;
+  padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 6px;
+  overflow: hidden;
+  transition:
+    margin 0.2s ease,
+    width 0.2s ease;
+}
+
+.ops-brand__logo {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.ops-brand__logo--full {
+  width: 96px;
+  height: 32px;
+}
+
+.ops-brand__logo--icon {
+  width: 32px;
+  height: 32px;
+}
+
+.ops-brand__badge {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+  padding: 0 6px;
+  border: 1px solid rgba(79, 70, 229, 0.22);
+  border-radius: 999px;
+  background: #eef2ff;
   color: #4f46e5;
-  font-weight: 800;
-  font-size: 16px;
-  letter-spacing: 0.05em;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.ops-brand__badge--compact {
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border-radius: 5px;
+  font-size: 11px;
+}
+
+:deep(.ant-layout-sider-collapsed) .ops-brand {
+  width: 58px;
+  margin: 14px auto 18px;
+  gap: 2px;
 }
 
 .ops-header {

apps/ops-web/src/views/LoginView.vue

@@ -7,8 +7,8 @@
       }"
     >
       <div class="brand">
-        <div class="brand-icon"><StarOutlined :style="{ fontSize: '16px' }" /></div>
-        <span>省心推运营控制台</span>
+        <img class="brand-logo brand-logo--white" src="/logos/icon-with-title.svg" alt="省心推运营控制台" />
+        <span class="brand-badge brand-badge--white">运营端</span>
       </div>
       <div class="characters-area">
         <AnimatedCharacters
@@ -29,8 +29,8 @@
     <div class="right">
       <div class="form-wrapper">
         <div class="mobile-brand">
-          <div class="brand-icon"><StarOutlined :style="{ fontSize: '16px' }" /></div>
-          <span>省心推运营控制台</span>
+          <img class="brand-logo brand-logo--mobile" src="/logos/icon-with-title.svg" alt="省心推运营控制台" />
+          <span class="brand-badge">运营端</span>
         </div>
         <div class="header">
           <h1>欢迎回来</h1>
@@ -102,7 +102,7 @@
 </template>
 
 <script setup lang="ts">
-import { EyeInvisibleOutlined, EyeOutlined, StarOutlined } from '@ant-design/icons-vue'
+import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons-vue'
 import { onMounted, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -205,19 +205,41 @@ async function handleSubmit(): Promise<void> {
   z-index: 20;
   display: flex;
   align-items: center;
-  gap: 8px;
-  font-size: 18px;
-  font-weight: 600;
+  gap: 10px;
 }
-.brand-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(8px);
-  display: flex;
+
+.brand-logo {
+  display: block;
+  width: 164px;
+  height: auto;
+  object-fit: contain;
+}
+
+.brand-logo--white {
+  filter: brightness(0) invert(1);
+}
+
+.brand-badge {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
+  height: 24px;
+  padding: 0 9px;
+  border: 1px solid rgba(79, 70, 229, 0.24);
+  border-radius: 999px;
+  background: #eef2ff;
+  color: #4f46e5;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.brand-badge--white {
+  border-color: rgba(255, 255, 255, 0.38);
+  background: rgba(255, 255, 255, 0.14);
+  color: #fff;
+  backdrop-filter: blur(8px);
 }
 .characters-area {
   position: relative;
@@ -438,11 +460,12 @@ async function handleSubmit(): Promise<void> {
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    gap: 8px;
-    font-size: 18px;
-    font-weight: 600;
+    gap: 10px;
     margin-bottom: 48px;
-    color: #18181b;
+  }
+
+  .brand-logo--mobile {
+    width: 144px;
   }
 }
 </style>