feat: 框架样式调整

src/components/_base/navbar/components/middle-side/style.scss

@@ -13,7 +13,7 @@
   :deep(.arco-menu) {
     height: 100%;
     .arco-menu-inner {
-      padding: 0 20px;
+      padding: 0 24px;
     }
     .arco-menu-item {
       padding: 0;

src/components/_base/navbar/components/right-side/index.vue

@@ -1,19 +1,22 @@
 <template>
   <div class="right-wrap">
-    <!-- 灵机空间入口 -->
-    <div class="agent-entry" :class="isAgentRoute ? 'agent' : ''" @click="handleAgentClick"></div>
-
     <!-- 任务中心 -->
-    <div class="relative mx-16px" @click="setUnread">
+    <div
+      class="relative p-6px rounded-30px flex items-center justify-center bg-[rgba(255,255,255,0.6)]"
+      @click="setUnread"
+    >
       <SvgIcon
         name="svg-taskCenter"
-        size="16"
+        size="20"
         class="cursor-pointer color-#737478 hover:color-#6D4CFE"
         @click="openDownloadCenter"
       />
-      <div class="w-4px h-4px rounded-50% bg-#F64B31 absolute top-1px right-1px" v-if="hasUnreadInfo"></div>
+      <div class="w-6px h-6px rounded-50% bg-#F64B31 absolute top-6px right-6px" v-if="hasUnreadInfo"></div>
     </div>
 
+    <!-- 灵机空间入口 -->
+    <div class="agent-entry mx-16px" :class="isAgentRoute ? 'agent' : ''" @click="handleAgentClick"></div>
+
     <!-- 头像设置 -->
     <a-dropdown trigger="click" class="layout-avatar-dropdown">
       <a-avatar class="cursor-pointer" :size="32">

src/components/_base/navbar/components/right-side/style.scss

@@ -1,6 +1,5 @@
 .right-wrap {
   display: flex;
-  padding-right: 20px;
   list-style: none;
   align-items: center;
   .agent-entry {

src/components/_base/navbar/index.vue

@@ -1,19 +1,17 @@
 <template>
-  <div class="navbar-wrap">
-    <div class="left-wrap">
-      <div class="h-full flex items-center cursor-pointer" @click="handleUserHome">
-        <img src="@/assets/LOGO.svg" alt="" />
-      </div>
+  <div class="navbar-wrap px-24px">
+    <div class="left-wrap flex items-center cursor-pointer" @click="handleUserHome">
+      <img src="@/assets/img/icon-logo.png" alt="" width="96" height="24" />
     </div>
     <div class="flex-1">
-      <NavbarMenu v-if="!isAgentRoute"/>
+      <MiddleSide v-if="!isAgentRoute" />
     </div>
-    <RightSide :isAgentRoute="isAgentRoute" v-if="userStore.isLogin"/>
+    <RightSide :isAgentRoute="isAgentRoute" v-if="userStore.isLogin" />
   </div>
 </template>
 
 <script setup>
-import NavbarMenu from './components/navbar-menu';
+import MiddleSide from './components/middle-side';
 import RightSide from './components/right-side';
 
 import { useUserStore } from '@/stores';
@@ -29,15 +27,30 @@ const isAgentRoute = computed(() => {
 </script>
 <style scoped lang="scss">
 .navbar-wrap {
+  position: relative;
   display: flex;
   justify-content: space-between;
   height: 100%;
-  background-color: var(--color-bg-2);
-  border-bottom: 1px solid var(--color-border);
+  &::before {
+    width: 100%;
+    height: 100%;
+    background: url('@/assets/img/icon-app-header-bg.png') center top no-repeat !important;
+    background-size: cover !important;
+    bottom: 0;
+    content: '';
+    display: block;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: -998;
+  }
+
+  // background-color: var(--color-bg-2);
+  // border-bottom: 1px solid var(--color-border);
   .left-wrap {
     display: flex;
     align-items: center;
-    padding-left: 24px;
   }
   .arco-dropdown-option-suffix {
     display: none;

src/components/container.vue

@@ -17,7 +17,7 @@ const props = defineProps<{
 </script>
 <style scoped lang="scss">
 .container {
-  border: 1px solid var(--BG-300, rgba(230, 230, 232, 1));
+  // border: 1px solid var(--BG-300, rgba(230, 230, 232, 1));
   background: var(--BG-white, rgba(255, 255, 255, 1));
   padding: 16px 24px 20px 24px;
   border-radius: 8px;