Kaynağa Gözat

fix: 改变头像背景自适应逻辑

王晓东 3 ay önce
ebeveyn
işleme
dd92326540

+ 3 - 1
src/components/NavBarNormal/index.tsx

@@ -30,6 +30,7 @@ const Index: React.FC<Props> = ({
   scrollFadeInDelta = 0,
 }) => {
   const statusBarHeight = useAppStore.getState().statusBarHeight;
+  const ratio = useAppStore.getState().ratio;
   //
   const [opacity, setOpacity] = useState(scrollFadeIn ? 0 : 1);
   usePageScroll((e) => {
@@ -88,13 +89,14 @@ const Index: React.FC<Props> = ({
       );
     }
   };
+  
   const renderNavBar = () => {
     return (
       <View
         className={`${style.navBarContainer}`}
         id="leaf-nav-bar"
         style={{
-          paddingTop: statusBarHeight,
+          paddingTop: `${statusBarHeight * ratio}rpx`,
         }}
       > 
         {/* 背景毛玻璃与 渐变背景互斥 */}

+ 6 - 6
src/components/chat-message/MessageRobot.tsx

@@ -116,14 +116,14 @@ export default ({ agent, text, message, showUser=false, textReasoning = "" }: Pr
       const pics = payload.pics ?? [];
       // console.log(body)
       return (
-        <View>
-          <View className="pb-10">
+        <>
+          {!!pics.length && <View className="pb-10">
             <RenderMedia urls={pics}></RenderMedia>
-          </View>
-          <View className="pb-10">
+          </View>}
+          {!!links.length && <View className="pb-10">
             <RenderLinks urls={links}></RenderLinks>
-          </View>
-        </View>
+          </View>}
+        </>
       );
     }
     return <></>;

+ 12 - 4
src/components/page-wrapper/CustomBg.tsx

@@ -1,11 +1,12 @@
 /**
  * 用于 page 根目录的样式等设置
  */
-import { View, Video } from "@tarojs/components";
+import { View, Video, Image } from "@tarojs/components";
 import React, { useEffect, useState } from "react";
 import pageStyle from "./index.module.less";
-import Taro from "@tarojs/taro";
+
 import { useAppStore } from "@/store/appStore";
+import { DEFAULT_AVATAR_BG } from '@/config'
 interface Props {
   styleBg?: string|null;
 }
@@ -21,7 +22,7 @@ const Index: React.FC<Props> = ({styleBg}) => {
   const bgImageStyle = {
     height: `${(750 / windowWidth) * windowHeight}rpx`,
     backgroundImage: `url(${bg})`,
-    backgroundSize: 'auto 100%',
+    backgroundSize: 'auto 100%!important',
     backgroundPosition: 'center center'
   };
 
@@ -32,6 +33,11 @@ const Index: React.FC<Props> = ({styleBg}) => {
     return <></>
   }
 
+  // 如果是默认背景
+  if(bg === DEFAULT_AVATAR_BG){
+    return <View className={pageStyle.bg} style={bgImageStyle}></View>
+  }
+
   if(isMp4){ 
     return <Video
       controls={false}
@@ -45,8 +51,10 @@ const Index: React.FC<Props> = ({styleBg}) => {
       src={bg}
     />
   }
+
+  
   
-  return <View className={pageStyle.bg} style={bgImageStyle}></View>
+  return <Image className={pageStyle.bg} style={bgImageStyle} src={bg} mode='aspectFill'></Image>
 };
 
 export default Index;

+ 3 - 2
src/components/page-wrapper/index.module.less

@@ -22,7 +22,8 @@
   bottom: 0;
   width: 100%;
   height: 100%;
-  background-size: auto 100%!important;
-  background-repeat: no-repeat!important;
+  // background-size: auto 100%!important;
+  // background-repeat: no-repeat!important;
   transition: all ease-in .5s;
+  // object-fit: cover;
 }

+ 4 - 1
src/pages/chat/index.tsx

@@ -48,7 +48,7 @@ const agent = useAgentStore((state) => {
   
 
   
-  const { destroy, setScrollTop, genSessionId, sessionId, setAutoScroll } = useTextChat();
+  const { destroy, setScrollTop, genSessionId, setAutoScroll } = useTextChat();
   const scrollTop = useTextChat((state) => state.scrollTop);
   // const autoScroll = useTextChat((state) => state.autoScroll);
   
@@ -61,6 +61,8 @@ const agent = useAgentStore((state) => {
     });
     return res.data;
   };
+
+  // 获取历史聊天记录
   const { list, loadMore, pageIndex, mutate } = useLoadMoreInfinite<TMessage[]|TRobotMessage[]>(
     createKey(`messeagehistories${isVisitor}${agentId}`),
     fetcher,
@@ -79,6 +81,7 @@ const agent = useAgentStore((state) => {
     }
     return item
   })
+  
   const allMessages = useMemo(()=> [...[...parsedList].reverse(), ...messageList], [parsedList, messageList])
   const messagesLength = useMemo(() => allMessages.length, [allMessages.length]);
   const prevLengthRef = useRef(messagesLength);

+ 4 - 1
src/store/appStore.ts

@@ -5,6 +5,7 @@ import { useUserStore } from './userStore'
 import Taro from '@tarojs/taro'
 export interface AppState {
   value: number
+  ratio: number
   headerHeight: number
   screenHeight: number
   windowWidth: number
@@ -27,6 +28,7 @@ export interface AppState {
 
 export const useAppStore = create<AppState>((set) => ({
   value: 0,
+  ratio: 1, // 750 / windowWidth  宽高比
   topDistance: 0, // 内容距离顶部的距离
   headerHeight: 0, // 头部高度
   screenHeight: 0, // 屏幕高度
@@ -73,6 +75,7 @@ export const useAppStore = create<AppState>((set) => ({
     const screenHeight = info.screenHeight
     const windowWidth = info.windowWidth
     const windowHeight = info.windowHeight // 更精确的可用高度(减去状态栏等)
+    const ratio = 750 / windowWidth
     
     // 导航栏高度 = 胶囊和状态栏之间的留白 * 2 胶囊高度
     let navbarHeight = (capsuleInfo.top - statusBarHeight) * 2 + capsuleInfo.height
@@ -94,7 +97,7 @@ export const useAppStore = create<AppState>((set) => ({
     }
     
     
-    set({ systemInfo: info, capsuleInfo, statusBarHeight, headerHeight, isIos, desktopPopupTips, bottomSafeHeight, screenHeight, windowHeight, windowWidth})
+    set({ systemInfo: info, capsuleInfo, statusBarHeight, headerHeight, isIos, desktopPopupTips, bottomSafeHeight, screenHeight, windowHeight, windowWidth, ratio})
     
       
   },

+ 1 - 0
src/types/bot.ts

@@ -54,6 +54,7 @@ export type TMessage = {
   originalAgentId?: string,
   role: TChatRole,
   body?: TMessageBody
+  sessionId?: string
 }
 
 export type TRobotMessage = {