feat(navbar): 添加可插槽的导航栏组件并更新页面样式

packages/app/src/components/navbar-evo.vue

@@ -9,6 +9,10 @@ const props = defineProps<{
   dark?: boolean
   placeholder?: boolean
 }>()
+const slots = defineSlots<{
+  // default(props: { data: Ref<S>[]; source: T }): any
+  prepend(): any
+}>()
 const router = useRouter()
 const pages = computed(() => getCurrentPages())
 const themeVars = computed<ConfigProviderThemeVars>(() => ({
@@ -33,10 +37,29 @@ onMounted(() => {
         :bordered="false"
         :custom-class="`${transparent ? 'bg-transparent!' : ''} `"
         v-bind="{ title }"
-        @click-left="router.back()"
+        @click-left="!slots.prepend && router.back()"
       >
         <!-- {{ pages }} -->
-        <template #capsule>
+        <template v-if="slots.prepend" #left>
+          <div class="flex items-center gap-4.5">
+            <wd-icon
+              v-if="pages.length === 1"
+              name="home"
+              size="50rpx"
+              :color="dark ? 'white' : 'blacak'"
+              @click="handleToHome"
+            ></wd-icon>
+            <wd-icon
+              v-else
+              name="arrow-left"
+              size="48rpx"
+              :color="dark ? 'white' : 'blacak'"
+              @click="router.back()"
+            ></wd-icon>
+            <slot name="prepend"></slot>
+          </div>
+        </template>
+        <template v-if="!slots.prepend" #capsule>
           <div class="w-full h-full">
             <!-- <wd-button
               type="icon"

packages/app/src/pages.json

@@ -184,7 +184,8 @@
       "type": "page",
       "style": {
         "navigationBarTitleText": "详情",
-        "navigationBarBackgroundColor": "#fff"
+        "navigationBarBackgroundColor": "#fff",
+        "navigationStyle": "custom"
       }
     },
     {

packages/app/src/pages/home/moment/index.vue

@@ -2,7 +2,8 @@
 {
   "style": {
     "navigationBarTitleText": "详情",
-    "navigationBarBackgroundColor": "#fff"
+    "navigationBarBackgroundColor": "#fff",
+    "navigationStyle": "custom"
   }
 }
 </route>
@@ -24,9 +25,12 @@ import dayjs from 'dayjs'
 import SectionHeading from '@/components/section-heading.vue'
 import BottomAppBar from '@/components/bottom-app-bar.vue'
 import { likeActived, likeBlack } from '@designer-hub/assets/src/icons'
+import NavBarEvo from '@/components/navbar-evo.vue'
+import { useRouter } from '../../../core/utils/router'
 
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
+const router = useRouter()
 const id = ref()
 const { data, run } = useRequest(() => getCircle(id.value), { initialData: {} })
 const { data: reviews, run: runGetReviews } = useRequest(
@@ -97,14 +101,29 @@ onShareAppMessage(async () => {
     <!-- <div class="my-4 text-black/90 text-lg font-normal font-['PingFang_SC'] leading-[10.18px]">
       {{ data?.content }}
     </div> -->
+    <NavBarEvo placeholder>
+      <template #prepend>
+        <div
+          class="flex items-center gap-2"
+          @click="() => router.push(`/pages/mine/homepage/index?id=${data.stylistId}`)"
+        >
+          <wd-img width="24" height="24" round :src="data.headUrl"></wd-img>
+          <div class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-[10.18px]">
+            {{ data.stylistName }}
+          </div>
+        </div>
+      </template>
+    </NavBarEvo>
     <template v-if="swiperSizes && !isVideo">
-      <swiper :style="swiperStyle" @change="handleChange">
-        <template v-for="it of data?.bannerUrls" :key="it">
-          <swiper-item>
-            <wd-img width="100%" :src="it" mode="widthFix"></wd-img>
-          </swiper-item>
-        </template>
-      </swiper>
+      <div>
+        <swiper class="" :style="swiperStyle" @change="handleChange">
+          <template v-for="it of data?.bannerUrls" :key="it">
+            <swiper-item>
+              <wd-img width="100%" :src="it" mode="widthFix"></wd-img>
+            </swiper-item>
+          </template>
+        </swiper>
+      </div>
     </template>
     <template v-if="isVideo">
       <video width="100%" class="w-full aspect-[1.64/1]" :src="data?.bannerUrls[0]"></video>