fix: 聊天框个人信息展示不同样式

src/components/AgentCard/index.module.less

@@ -73,6 +73,7 @@
   width: 20px;
   height: 16px;
   border-radius: 4px;
+  // align-self: flex-start;
 }
 
 .subInfo{

src/components/AgentCard/index.tsx

@@ -9,25 +9,40 @@ interface Props {
   onClick?: (data: TContactItem|TAgent)=>void
   renderRight?: ()=> JSX.Element | JSX.Element[]
   className?: string
+  truncate?: boolean
+  showPositionAndEntNamePlaceholder?: boolean // 是否显示企业名称与职位名称占位
 }
-const Index = ({onClick, data, className, renderRight}: Props)=> {
+const Index = ({onClick, data, showPositionAndEntNamePlaceholder = false, truncate=true, className, renderRight}: Props)=> {
+  const hasEntName = !!data.entName?.length
+  const hasPosition = !!!!data.position?.length
+  const truncateClassName = truncate ? 'truncate':''
+  const renderEntNameAndPosition = ()=> {
+    if(showPositionAndEntNamePlaceholder){
+      return <><View className={`max-w-156 ${truncateClassName}`}>{hasEntName ? data.entName : '暂无企业名称'}</View>
+        <View className='px-4'>|</View>
+        <View className={truncateClassName}>{!!data.position?.length ? data.position : '暂无职位名称'}</View>
+        </>
+    }
+    return <>{hasEntName && <View className={`max-w-156 ${truncateClassName}`}>{data.entName}</View>}
+        {(hasPosition && hasEntName) && <View className='px-4'>|</View>}
+        {hasPosition && <View className='truncate'>{data.position}</View>}
+    </>
+  }
+
   return (
     <View className={`${style.contactCard} bg-white rounded-12 ${className}`} onClick={()=>{onClick?.(data)}}>
       <View className={style.avatar}>
         <AvatarMedia source={data.avatarUrl ?? ''} className='w-[55px] h-[55px]' mode="aspectFill" />
       </View>
-      <View className={`${style.infoColumn} truncate`}>
-        <View className={`${style.nameRow} truncate`}>
-          <View className={`${style.nickName} truncate`}>{data.name}</View>
-          {data.isEnt && <View className={style.certificationContainer}><IconCertificateColor></IconCertificateColor></View>}
+      <View className={`${style.infoColumn} ${truncateClassName}`}>
+        <View className={`${style.nameRow} ${truncateClassName}`}>
+          <View className={`${style.nickName} ${truncateClassName}`}>{data.name}</View>
         </View>
-        <View className='flex flex-col w-full gap-8 truncate'>
-          <View className={`flex items-center flex-1 ${style.subInfo} truncate`}>
-            <View className='max-w-156 truncate'>{!!data.entName?.length ? data.entName : '暂无企业名称'}</View>
-            <View className='px-4'>|</View>
-            <View className='truncate'>{!!data.position?.length ? data.position : '暂无职位名称'}</View>
+        {(hasPosition || hasEntName) && <View className={`flex flex-col w-full gap-8 ${truncateClassName}`}>
+          <View className={`flex items-center flex-1 ${style.subInfo} ${truncateClassName}`}>
+            {renderEntNameAndPosition()}{data.isEnt && <View className={style.certificationContainer}><IconCertificateColor></IconCertificateColor></View>}
           </View>
-        </View>
+        </View>}
       </View>
       {renderRight && renderRight()}
     </View>

src/components/DigitalCard/DigitalCardBasic.tsx

@@ -1,4 +1,4 @@
-import { View } from "@tarojs/components";
+import { View, Text } from "@tarojs/components";
 import IconCertificateColor from "@/components/icon/icon-certificate-color";
 export interface DigitalCardBasicProps {
   certificated?: boolean;
@@ -13,18 +13,24 @@ const DigitalCardBasic = ({
   entName,
   certificated,
 }: DigitalCardBasicProps) => {
+  const hasEntName = !!entName?.length
+  const hasPosition = !!position?.length
+  const renderPosition = ()=> {
+    return <>
+        {(hasPosition && hasEntName) && <>&nbsp;|&nbsp;</>}
+        {hasPosition && <>{position}</>}
+    </>
+  }
   return (
     <View className="flex items-start">
-      <View className="flex flex-col flex-1 truncate">
-        <View className="flex items-end gap-8 truncate">
-          <View className="text-16 max-w-120 font-medium leading-32 truncate">{name}</View>
-          <View className="text-12 leading-20 truncate">{position || ''}</View>
-        </View>
-        <View className="flex items-center gap-2">
-          <View className="text-12 leading-20 text-gray-45">
-            {entName || ''} {certificated && <IconCertificateColor />}
-          </View>
+      <View className="flex flex-col flex-1 justify-center min-h-48 gap-8">
+        <View className="flex items-end gap-8">
+          <View className="text-16 max-w-120 font-medium leading-24 font-pingfangSCMedium">{name}</View>
         </View>
+        {/* inline-flex flex-nowrap break-normal items-center */}
+        {(hasPosition || hasEntName) && <View className="text-12 leading-20 text-gray-45 gap-4">
+          {entName || ''}{renderPosition()}{!!certificated && <View className="inline-block transform translate-y-2">&nbsp;<IconCertificateColor /></View>}
+        </View>}
       </View>
     </View>
   );

src/pages/agent/components/AgentSetting/components/AgentCard/index.module.less

@@ -69,7 +69,6 @@
   min-height: 373px;
   box-sizing: border-box;
   padding: 0 24px 54px;
-  border-radius: 24px;
   gap: 8px;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50.12%, #D6D6D6 100%); 
 }

src/pages/agent/index.tsx

@@ -51,7 +51,7 @@ export default function Index() {
 
   return (
     <PageCustom>
-      <NavBarNormal scrollFadeIn backText="创建"></NavBarNormal>
+      <NavBarNormal scrollFadeIn>创建</NavBarNormal>
       <View className="px-16 w-full flex flex-col gap-20">
         <View className="fixed top-0 left-0 right-0 z-10" 
         style={{

src/pages/chat/components/personal-card/index.tsx

@@ -6,47 +6,46 @@ import IconCertificateColor from "@/components/icon/icon-certificate-color";
 import { TAgentDetail } from '@/types/agent';
 import { AvatarMedia } from '@/components/AvatarMedia';
 interface IProps {
-  size?: 'mini'|'large'
   agent: TAgentDetail|null
+  haveBg: boolean
 }
-export default ({size='large', agent}:IProps) => {
-
+export default ({haveBg, agent}:IProps) => { 
+  const nameStyle = haveBg ? 'text-white' : 'text-black'
+  const entStyle = haveBg ? 'text-white' : 'text-black-45'
   const renderContent = () => {
-    if(size === 'mini'){
     return <>
         <View className="rounded-full overflow-hidden w-28 h-28">
           <AvatarMedia source={agent?.avatarLogo || ''} className='w-28 h-28'></AvatarMedia>
         </View>
         <View className="flex flex-col flex-1 gap-4">
           <View className="flex items-center gap-4">
-            <View className="text-12 font-medium leading-12 text-white">{agent?.name}</View>
+            <View className={`text-12 font-medium leading-12 ${nameStyle}`}>{agent?.name}</View>
             {agent?.isEnt && <View className="text-12 leading-12"><IconCertificateColor/></View>}
           </View>
-          {agent?.entId && <View className="flex items-center gap-2">
-            <View className="text-12 leading-12 truncate max-w-[180px] text-white">
+          {agent?.entName && <View className="flex items-center gap-2">
+            <View className={`text-12 leading-12 truncate max-w-[180px] ${entStyle}`}>
               {agent?.entName}
             </View>
           </View>}
         </View>
     </>
-    }
-    return <>
-        <View className="rounded-full overflow-hidden w-60 h-60">
-          <AvatarMedia source={agent?.avatarLogo || ''} className='w-60 h-60'></AvatarMedia>
-        </View>
-        <View className="flex flex-col flex-1">
-          <View className="flex items-end gap-8">
-            <View className="text-24 font-medium leading-32">{agent?.name}</View>
-            <View className="text-12 leading-20">{agent?.position}</View>
-          </View>
-          <View className="flex items-center gap-2">
-            <View className="text-12 leading-20 truncate max-w-[188px]">
-              {agent?.entName}
-            </View>
-            {agent?.isEnt && <TagCertificated />}
-          </View>
-        </View>
-    </>
+    // return <>
+    //     <View className="rounded-full overflow-hidden w-60 h-60">
+    //       <AvatarMedia source={agent?.avatarLogo || ''} className='w-60 h-60'></AvatarMedia>
+    //     </View>
+    //     <View className="flex flex-col flex-1">
+    //       <View className="flex items-end gap-8">
+    //         <View className="text-24 font-medium leading-32">{agent?.name}</View>
+    //         <View className="text-12 leading-20">{agent?.position}</View>
+    //       </View>
+    //       <View className="flex items-center gap-2">
+    //         <View className="text-12 leading-20 truncate max-w-[188px]">
+    //           {agent?.entName}
+    //         </View>
+    //         {agent?.isEnt && <TagCertificated />}
+    //       </View>
+    //     </View>
+    // </>
   }
   return (
     <View className="flex items-center gap-8">

src/pages/chat/index.tsx

@@ -17,6 +17,7 @@ import {
 
 import ChatGreeting from "./components/ChatGreeting";
 import IconArrowLeftWhite24 from "@/components/icon/IconArrowLeftWhite24";
+import IconArrowLeft from "@/components/icon/icon-arrow-left";
 import PersonalCard from "./components/personal-card";
 import { useAgentStore } from "@/store/agentStore";
 
@@ -174,13 +175,15 @@ export default function Index() {
   });
 
   const renderNavLeft = () => {
+    const haveBg =  (!!agent?.enabledChatBg && !!agent.avatarUrl?.length)
     return (
       <View
         className="flex items-center gap-8"
         onClick={() => Taro.navigateBack()}
       >
-        <IconArrowLeftWhite24 />
-        <PersonalCard agent={agent} size="mini" />
+        {haveBg ? <IconArrowLeftWhite24 /> : <IconArrowLeft />}
+        
+        <PersonalCard agent={agent} haveBg={haveBg} />
       </View>
     );
   };
@@ -241,7 +244,7 @@ export default function Index() {
             {result.map((group) => {
               return (
                 <>
-                  <View className="text-12 leading-20 text-gray-25 block text-center w-full">
+                  <View className={`text-12 leading-20 block text-center w-full ${(agent?.enabledChatBg && !!agent?.avatarUrl?.length) ? 'text-white-70' : 'text-black-25'}`}>
                     {formatMessageTime(group.dt)}
                   </View>
                   {group.list.map((message) => {

src/pages/contact/components/contact-card/index.tsx

@@ -34,6 +34,18 @@ const Index = ({data, deleteable, className, refresh, fromContact}: Props)=> {
       url: "/pages/profile/index?agentId=" + data.agentId,
     });
   }
+
+  const renderEntNameAndPosition = ()=> {
+    const hasEntName = !!data.entName?.length
+    const hasPosition = !!!!data.position?.length
+    return <View className={`flex items-center flex-1 ${style.subInfo} truncate`}>
+      {hasEntName && <View className='max-w-156 truncate'>{data.entName}</View>}
+      {(hasPosition && hasEntName) && <View className='px-4'>|</View>}
+      {hasPosition && <View className='truncate'>{data.position}</View>}
+      {data.isEnt && <View className={style.certificationContainer}><IconCertificateColor></IconCertificateColor></View>}
+    </View>
+    
+  }
   
   
   return (
@@ -47,15 +59,9 @@ const Index = ({data, deleteable, className, refresh, fromContact}: Props)=> {
           <View className={`${style.nickName} truncate`}>{data.name}</View>
         </View>
         <View className='flex flex-col w-full gap-8 truncate'>
-          <View className={`flex items-center flex-1 ${style.subInfo} truncate`}>
-            <View className='max-w-156 truncate'>{!!data.entName?.length ? data.entName : '暂无企业名称'}</View>
-            <View className='px-4'>|</View>
-            <View className='truncate'>{!!data.position?.length ? data.position : '暂无职位名称'}</View>
-            {data.isEnt && <View className={style.certificationContainer}><IconCertificateColor></IconCertificateColor></View>}
-          </View>
+          {renderEntNameAndPosition()}
           <View className={`flex-1 ${style.lastMsg} truncate`}>{data.lastChatMsg}</View>
         </View>
-        
       </View>
     </View>
   )

src/pages/visiteor-detail/components/VisitorSummary/index.tsx

@@ -35,6 +35,7 @@ const VisitorSummary = ({ data }: IndexProps) => {
         className="bg-opacity-0 p-0 rounded-none mb-16"
         key={data.agentId}
         data={data}
+        truncate={false}
         onClick={() => {
           Taro.navigateTo({
             url: `/pages/profile/index?agentId=${data.agentId}`,
@@ -44,19 +45,19 @@ const VisitorSummary = ({ data }: IndexProps) => {
       </AgentCard>
       <View className="flex flex-col w-full gap-8">
         <View className="flex gap-8 items-center text-12 leading-20">
-          <Image src={IconPhone} className="w-16 h-16 shrink-0"></Image>
+          <Image src={IconPhone} className="w-16 h-16 shrink-0 self-start"></Image>
           <Text>{data.mobile}</Text>
           <Image src={IconCopy} className="w-16 h-16 shrink-0" onClick={()=> handleCopy(data.mobile ?? '')}></Image>
         </View>
         <View className="flex gap-8 items-center text-12 leading-20">
-          <Image src={IconMark} className="w-16 h-16 shrink-0"></Image>
+          <Image src={IconMark} className="w-16 h-16 shrink-0 self-start"></Image>
           <View>
             第<Text className="text-primary text-12 font-medium px-6">{data.visitTimes}</Text>
           次访问了你的智能体「<Text className="text-primary text-12 font-medium px-6">{data.myAgentName}</Text>」
           </View>
         </View>
         <View className="flex gap-8 items-center text-12 leading-20">
-          <Image src={IconTime} className="w-16 h-16 shrink-0"></Image>
+          <Image src={IconTime} className="w-16 h-16 shrink-0 self-start"></Image>
           {data.lastChatTime}
         </View>
       </View>

tailwind.config.js

@@ -28,6 +28,7 @@ module.exports = {
   theme: {
     colors: {
       'white': '#FFFFFF',
+      'white-70': 'rgba(255, 255, 255, 0.7)',
       'primary': '#317CFA',
       'primary-10': 'rgba(49, 124, 250, 0.1)',
       'black': '#000000',
@@ -35,6 +36,9 @@ module.exports = {
       'black-3': '#333333',
       'black-6': '#666666',
       'black-9': '#999999',
+      'black-25': 'rgba(0, 0, 0, 0.25)',
+      'black-45': 'rgba(0, 0, 0, 0.45)',
+      'black-65': 'rgba(0, 0, 0, 0.65)',
       'title': '#111A34',
       'harsh': '#F94F17',
       'purple': '#7e5bef',
@@ -47,7 +51,6 @@ module.exports = {
       'gray-page': '#f6f6f6',
       'gray-dark': '#273444',
       'gray-f8': '#F8F8F8',
-      'black-light': 'rgba(0, 0, 0, 0.45)',
       'gray-25': 'rgba(0, 0, 0, 0.25)',
       'gray-45': 'rgba(0, 0, 0, 0.45)',
       'gray-65': 'rgba(0, 0, 0, 0.65)',
@@ -69,6 +72,7 @@ module.exports = {
       },
       lineHeight: {
         '0': '0px',
+        '1': '1px',
         ...configLineHeight,
       },
       spacing: configSpace,