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/admin-web/src/layouts/AppShell.vue

@@ -522,9 +522,19 @@ onBeforeUnmount(() => {
       class="admin-sider"
       :class="{ 'admin-sider--collapsed': siderCollapsed }"
     >
-      <div class="admin-brand">
-        <span class="admin-brand__full">{{ t('app.name') }}</span>
-        <span class="admin-brand__short">省</span>
+      <div class="admin-brand" :aria-label="t('app.name')">
+        <img
+          class="admin-brand__logo admin-brand__logo--full"
+          src="/logos/icon-with-title.svg"
+          alt=""
+          aria-hidden="true"
+        />
+        <img
+          class="admin-brand__logo admin-brand__logo--icon"
+          src="/logos/icon-color.svg"
+          alt=""
+          aria-hidden="true"
+        />
       </div>
 
       <a-menu
@@ -804,8 +814,13 @@ onBeforeUnmount(() => {
       :closable="false"
       :body-style="{ padding: 0 }"
     >
-      <div class="admin-brand admin-brand--drawer">
-        {{ t('app.name') }}
+      <div class="admin-brand admin-brand--drawer" :aria-label="t('app.name')">
+        <img
+          class="admin-brand__logo admin-brand__logo--full"
+          src="/logos/icon-with-title.svg"
+          alt=""
+          aria-hidden="true"
+        />
       </div>
 
       <a-menu mode="inline" theme="light" :selected-keys="selectedKeys" class="admin-menu">
@@ -921,40 +936,52 @@ onBeforeUnmount(() => {
 }
 
 .admin-brand {
-  height: 40px;
-  background: #f0f8ff;
-  border: 1px solid #bae0ff;
-  margin: 16px;
-  border-radius: 6px;
+  height: 38px;
+  margin: 14px 24px 18px;
+  padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #1677ff;
-  font-weight: 800;
-  font-size: 16px;
-  letter-spacing: 0.05em;
-  white-space: nowrap;
+  overflow: hidden;
   transition:
     margin 0.2s ease,
     width 0.2s ease;
 }
 
-.admin-brand__short {
+.admin-brand__logo {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.admin-brand__logo--full {
+  width: 128px;
+  height: 38px;
+}
+
+.admin-brand__logo--icon {
   display: none;
-  letter-spacing: 0;
+  width: 34px;
+  height: 34px;
 }
 
 .admin-sider--collapsed .admin-brand {
   width: 40px;
-  margin-inline: auto;
+  margin: 14px auto 18px;
+  justify-content: center;
 }
 
-.admin-sider--collapsed .admin-brand__full {
+.admin-sider--collapsed .admin-brand__logo--full {
   display: none;
 }
 
-.admin-sider--collapsed .admin-brand__short {
-  display: inline;
+.admin-sider--collapsed .admin-brand__logo--icon {
+  display: block;
+}
+
+.admin-brand--drawer {
+  margin: 16px 20px;
 }
 
 .admin-menu {

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

@@ -7,8 +7,7 @@
       }"
     >
       <div class="brand">
-        <div class="brand-icon"><StarOutlined :style="{ fontSize: '16px' }" /></div>
-        <span>{{ t('app.name') }}</span>
+        <img class="brand-logo brand-logo--white" src="/logos/icon-with-title.svg" :alt="t('app.name')" />
       </div>
       <div class="characters-area">
         <AnimatedCharacters
@@ -29,8 +28,7 @@
     <div class="right">
       <div class="form-wrapper">
         <div class="mobile-brand">
-          <div class="brand-icon"><StarOutlined :style="{ fontSize: '16px' }" /></div>
-          <span>{{ t('app.name') }}</span>
+          <img class="brand-logo brand-logo--mobile" src="/logos/icon-with-title.svg" :alt="t('app.name')" />
         </div>
         <div class="header">
           <h1>{{ t('auth.welcomeBack') }}</h1>
@@ -88,7 +86,7 @@
 </template>
 
 <script setup lang="ts">
-import { EyeInvisibleOutlined, EyeOutlined, StarOutlined } from '@ant-design/icons-vue'
+import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons-vue'
 import { message } from 'ant-design-vue'
 import { onMounted, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -202,19 +200,17 @@ async function handleSubmit(): Promise<void> {
   z-index: 20;
   display: flex;
   align-items: center;
-  gap: 8px;
-  font-size: 18px;
-  font-weight: 600;
 }
-.brand-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(8px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+
+.brand-logo {
+  display: block;
+  width: 184px;
+  height: auto;
+  object-fit: contain;
+}
+
+.brand-logo--white {
+  filter: brightness(0) invert(1);
 }
 .characters-area {
   position: relative;
@@ -410,11 +406,11 @@ async function handleSubmit(): Promise<void> {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
-    font-size: 18px;
-    font-weight: 600;
     margin-bottom: 48px;
-    color: #18181b;
+  }
+
+  .brand-logo--mobile {
+    width: 156px;
   }
 }
 </style>