feat: chat ui

project.private.config.json

@@ -7,6 +7,13 @@
   "condition": {
     "miniprogram": {
       "list": [
+        {
+          "name": "pages/chat/index",
+          "pathName": "pages/chat/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
         {
           "name": "pages/agent-gen/index",
           "pathName": "pages/agent-gen/index",

src/app.config.ts

@@ -1,7 +1,7 @@
 export default defineAppConfig({
   pages: [
-    'pages/chat/index',
     'pages/profile/index',
+    'pages/chat/index',
     'pages/agent-gen/index',
     'pages/agent/index',
     'pages/editor-contact/index',

src/components/icon/icon-arrow-left/index.tsx

@@ -0,0 +1,7 @@
+import { Image } from '@tarojs/components'
+import Icon from '@/images/svgs/icon-arrow-left.svg'
+export default () => {
+  return (
+    <Image src={Icon} mode="widthFix" style={{width: '9px', height: '17px'}}></Image>
+  )
+}

src/components/page-wrapper/index.module.less

@@ -1,13 +1,13 @@
 .bg{
   position: fixed;
-  z-index: -1;
+  z-index: -3;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   background-size: 100%!important;
   background-repeat: no-repeat!important;
-  background-color: #f5f5f2!important;
+  background-color: #f6f6f6!important;
 }
 .fillBgRest{
   position: fixed;

src/images/svgs/icon-arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="18" viewBox="0 0 9 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.00006 16.4375L7.95459 17.5L0.289555 9.71008C-0.0963281 9.31792 -0.0914922 8.67717 0.289555 8.28991L7.95459 0.5L9.00006 1.5625L1.68179 9L9.00006 16.4375Z" fill="black" fill-opacity="0.9"/>
+</svg>

src/pages/chat/components/chat-message/MessageRobotPlain.tsx

@@ -0,0 +1,16 @@
+import { View, Text } from "@tarojs/components";
+import style from './index.module.less'
+interface Props {
+  text: string,
+}
+export default ({text}: Props) => {
+  return <View>
+      <View className={`${style.message } ${style.messageRobot} gap-10`}>
+        <View className={style.messageContent}>
+          <Text>{text}</Text>
+        </View>
+    </View>
+  </View>
+}
+
+

src/pages/chat/components/chat-message/index.module.less

@@ -17,9 +17,9 @@
 }
 .messageRobot{
   border-top-left-radius: 2px;
-  border-top-right-radius: 20px;
-  border-bottom-right-radius: 20px;
-  border-bottom-left-radius: 20px;
+  border-top-right-radius: 16px;
+  border-bottom-right-radius: 16px;
+  border-bottom-left-radius: 16px;
 }
 
 
@@ -27,15 +27,9 @@
   display: flex;
   justify-content: flex-end;
   padding: 12px 16px;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 10px;
-  border-bottom-left-radius: 10px;
-  padding-top: 10px;
-  padding-right: 16px;
-  padding-bottom: 10px;
+  border-radius: 16px;
   padding-left: 16px;
-  background: #CBF706;
+  background: var(--color-primary);
 }
 
 .messageContent{

src/pages/chat/components/chat-welcome/index.module.less

@@ -0,0 +1,8 @@
+.container{
+  padding: 24px 16px;
+  height: 448px;
+  border-top-left-radius: 24px;
+  border-top-right-radius: 24px;
+  background: rgba(#FFF, .45);
+  backdrop-filter: blur(38px);
+}

src/pages/chat/components/chat-welcome/index.tsx

@@ -0,0 +1,25 @@
+
+import { View } from '@tarojs/components'
+import style from './index.module.less'
+import PersonalCard from '../personal-card'
+import MessageRobotPlain from '../chat-message/MessageRobotPlain'
+export default ()=> {
+  return (
+    <View className='pt-118'>
+    <View className={style.container}>
+        <View className='mb-24'>
+          <PersonalCard />
+        </View>
+        <View className='flex flex-col gap-8'>
+          <MessageRobotPlain text='Hi～我是张三，
+  想要咨询近视眼手术的事宜，都可以向我提问，茗视光眼科医院是北京出名的眼科医院，可以放心咨询～🎉🎉🎉' />
+          <MessageRobotPlain text='Hi～我是张三，
+  想要咨询近视眼手术的事宜，都可以向我提问，茗视光眼科医院是北京出名的眼科医院，可以放心咨询～🎉🎉🎉' />
+          <MessageRobotPlain text='医院可以做哪些近视手术？' />
+          <MessageRobotPlain text='怎么知道自己能不能做手术？' />
+          <MessageRobotPlain text='痛不痛？马上能看清吗？' />
+        </View>
+    </View> 
+   </View>
+  )
+}

src/pages/chat/components/input-bar/TextInputBar.tsx

@@ -32,7 +32,7 @@ export default ({disabled, onIconClick, onSend}:Props) => {
         extraStyle={{'borderRadius': '10px'}}
         confirmType="send"
         prefix={iconMic} 
-        placeholder="请输入想要了解的信息" 
+        placeholder="有问题尽管问我..." 
         value={value} 
         cursorSpacing={400}
         onConfirm={handleConfirm}

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

@@ -0,0 +1,50 @@
+
+import { View } from '@tarojs/components'
+
+import TagCertificated from "@/components/tag-certificated";
+import IconCertificateColor from "@/components/icon/icon-certificate-color";
+interface IProps {
+  size?: 'mini'|'large'
+}
+export default ({size='large'}:IProps) => {
+  const renderContent = () => {
+    if(size === 'mini'){
+    return <>
+      <View className="rounded-full overflow-hidden w-28 h-28 bg-black-6">
+        </View>
+        <View className="flex flex-col flex-1 gap-4">
+          <View className="flex items-end gap-4">
+            <View className="text-12 font-medium leading-12">张三</View>
+            <View className="text-12 leading-12"><IconCertificateColor/></View>
+          </View>
+          <View className="flex items-center gap-2">
+            <View className="text-gray-45 text-12 leading-12 truncate max-w-[180px]">
+              北京茗视光眼科医院管理有限公司
+            </View>
+          </View>
+        </View>
+    </>
+    }
+    return <>
+      <View className="rounded-full overflow-hidden w-60 h-60 bg-black-6">
+        </View>
+        <View className="flex flex-col flex-1">
+          <View className="flex items-end gap-8">
+            <View className="text-24 font-medium leading-32">张三</View>
+            <View className="text-12 leading-20">销售医师</View>
+          </View>
+          <View className="flex items-center gap-2">
+            <View className="text-12 leading-20 truncate max-w-[188px]">
+              北京茗视光眼科医院管理有限公司
+            </View>
+            <TagCertificated />
+          </View>
+        </View>
+    </>
+  }
+  return (
+    <View className="flex items-center gap-8">
+      {renderContent()}
+    </View>
+  )
+}

src/pages/chat/index.config.ts

@@ -1,6 +1,5 @@
 export default definePageConfig({
-  navigationBarTitleText: '文字聊天',
-  backgroundColor: '#F5F5F2',
+  navigationBarTitleText: '聊天',
+  navigationStyle: 'custom',
   "usingComponents": {},
-  // "navigationStyle": 'custom',
 })

src/pages/chat/index.tsx

@@ -1,6 +1,6 @@
 import { View, ScrollView } from "@tarojs/components";
-// import PageCustom from "@/components/page-custom/index";
-// import NavBarNormal from "@/components/nav-bar-normal/index";
+import NavBarNormal from "@/components/nav-bar-normal/index";
+import PageCustom from "@/components/page-custom/index";
 import Taro, { useUnload } from "@tarojs/taro";
 import { useCurrentCharacter } from "@/store/characterStore";
 import ChatMessage from "./components/chat-message";
@@ -12,6 +12,10 @@ import { useTextChat } from "@/store/textChat";
 import { EAI_MODEL } from "@/consts/enum";
 import type { TMessage, TRobotMessage } from "@/store/textChat";
 
+import ChatWelcome from './components/chat-welcome'
+import IconArrowLeft from "@/components/icon/icon-arrow-left";
+import PersonalCard from './components/personal-card'
+
 // 类型谓词函数
 function isRobotMessage(message: TMessage | TRobotMessage): message is TRobotMessage {
   return 'robot' in message && 'reasoningContent' in message;
@@ -19,6 +23,7 @@ function isRobotMessage(message: TMessage | TRobotMessage): message is TRobotMes
 
 export default function Index() {
   const [deepThink, setDeepThink] = useState(EAI_MODEL.DeepseekChat);
+  const [showWelcome, setShowWelcome] = useState(true);
   const [keyboardHeight, setKeyboardHeight] = useState(0);
   const [contentHeight, setContentHeight] = useState(0);
   const [scrollViewHeight, setScrollViewHeight] = useState(0);
@@ -56,7 +61,7 @@ export default function Index() {
       if(res.height <= 0){
         return setKeyboardHeight(0);
       }
-      
+      setShowWelcome(false)
       setKeyboardHeight(res.height - 24);
     });
 
@@ -71,13 +76,13 @@ export default function Index() {
     if (scrollViewRef.current) {
       const query = Taro.createSelectorQuery();
       // 获取聊天内容高度
-      query.select('#message-list').boundingClientRect((rect: any) => {
+      query.select('#messageList').boundingClientRect((rect: any) => {
         if (rect) {
           setContentHeight(rect.height);
         }
       }).exec();
       // 获取滚动容器高度
-      query.select('#scroll-view').boundingClientRect((rect: any) => {
+      query.select('#scrollView').boundingClientRect((rect: any) => {
         if (rect) {
           setScrollViewHeight(rect.height);
         }
@@ -110,15 +115,25 @@ export default function Index() {
   }, []);
 
   
-  
+  const renderNavLeft = ()=> {
+    return (
+      <View className="flex items-center gap-8">
+        <IconArrowLeft />
+        <View className={showWelcome ? 'hidden' : 'block'}>
+          <PersonalCard size="mini" />
+        </View>
+      </View>
+    )
+  }
 
   return (
-    <View className="h-screen bg-gray-page">
-      <View className="flex flex-col w-full h-screen pt-24 pb-138" style={{marginTop: `${marginTopOffset}px`}}>
+    <PageCustom>
+      <NavBarNormal scrollFadeIn leftColumn={renderNavLeft}></NavBarNormal>
+      <View className="flex flex-col w-full h-screen">
         <ScrollView
           ref={scrollViewRef}
           scrollY
-          id="scroll-view"
+          id="scrollView"
           style={{
             flex: 1,
             height: "1px", // 高度自适应
@@ -126,7 +141,8 @@ export default function Index() {
           scrollTop={scrollTop}
           scrollWithAnimation
         >
-          <View id="message-list" className="flex flex-col gap-8 px-18 pb-40">
+          {showWelcome && <ChatWelcome/>}
+          <View id="messageList" className="flex flex-col gap-8 px-18 pb-140">
             {messageList.map((message) => {
               const robotMessage = isRobotMessage(message) ? message : null;
               return (
@@ -140,6 +156,7 @@ export default function Index() {
             })}
           </View>
         </ScrollView>
+        <View className="h-140 w-10"></View>
         <View
           className="fixed left-0 right-0 bottom-0 min-h-130 z-50"
           style={{ 
@@ -156,11 +173,9 @@ export default function Index() {
           >
             深度思考(R1)
           </View>
-          {character && (
-            <InputBar aiModel={deepThink} character={character}></InputBar>
-          )}
+          <InputBar aiModel={deepThink} character={null}></InputBar>
         </View>
       </View>
-    </View>
+    </PageCustom>
   );
 }

src/pages/profile/components/top-bar/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState } from "react";
 import { View } from "@tarojs/components";
 import style from "./index.module.less";
 import TagCertificated from "@/components/tag-certificated";
@@ -15,14 +15,14 @@ import IconLocationGray from "@/components/icon/icon-location-gray";
 import { useAppStore } from "@/store/appStore";
 import AgentSwap from "../agent-swap/index";
 import AgentQRCode from "../agent-qrcode/index";
-import SharePopup from '@/components/custom-share/share-popup'
-import Taro from '@tarojs/taro';
+import SharePopup from "@/components/custom-share/share-popup";
+import Taro from "@tarojs/taro";
 
 export default () => {
   const headerHeight = useAppStore((state) => state.headerHeight);
   const [showAgentSwap, setShowAgentSwap] = useState(false);
   const [showAgentQRcode, setShowAgentQRcode] = useState(false);
-  const [showShare, setShowShare] = useState(true);
+  const [showShare, setShowShare] = useState(false);
 
   // 自定义背景样式
   const bgImageStyle = {
@@ -60,12 +60,19 @@ export default () => {
             </View>
             <View className="flex items-center gap-8">
               <View className="flex-1">
-                <View className="button-rounded button-primary">
+                <View
+                  className="button-rounded button-primary"
+                  onClick={() => {
+                    Taro.navigateTo({
+                      url: "/pages/chat/index",
+                    });
+                  }}
+                >
                   <IconChatWhite />
                   和TA聊聊
                 </View>
               </View>
-              <View 
+              <View
                 className={style.boxButton}
                 onClick={() => {
                   setShowAgentSwap(true);
@@ -73,18 +80,18 @@ export default () => {
               >
                 <IconQRCodeBlack />
               </View>
-              <View 
+              <View
                 className={style.boxButton}
-                onClick={()=> {
-                  setShowShare(true)
+                onClick={() => {
+                  setShowShare(true);
                 }}
               >
                 <IconSendBlack />
               </View>
-              <View 
+              <View
                 className={style.boxButton}
-                onClick={()=> {
-                  Taro.navigateTo({url: '/pages/editor-contact/index'})
+                onClick={() => {
+                  Taro.navigateTo({ url: "/pages/editor-contact/index" });
                 }}
               >
                 <IconEditBlack />
@@ -124,8 +131,12 @@ export default () => {
       </View>
 
       <AgentSwap show={showAgentSwap} setShow={setShowAgentSwap}></AgentSwap>
-      <AgentQRCode show={showAgentQRcode} setShow={setShowAgentQRcode}/>
-      <SharePopup show={showShare} setShow={setShowShare} character={null}></SharePopup>
+      <AgentQRCode show={showAgentQRcode} setShow={setShowAgentQRcode} />
+      <SharePopup
+        show={showShare}
+        setShow={setShowShare}
+        character={null}
+      ></SharePopup>
     </View>
   );
 };

src/store/appStore.ts

@@ -57,21 +57,23 @@ export const useAppStore = create<AppState>((set) => ({
     const isIos = system.includes('ios')
     let desktopPopupTips = false;
     const capsuleInfo = Taro.getMenuButtonBoundingClientRect()
-    // 胶囊热区 = 胶囊和状态栏之间的留白 * 2 (保持胶囊和状态栏上下留白一致) * 2(设计上为了更好看) + 胶囊高度
-    let navbarHeight = (capsuleInfo.top - statusBarHeight) * 4 + capsuleInfo.height
+    
+    // 导航栏高度 = 胶囊和状态栏之间的留白 * 2 胶囊高度
+    let navbarHeight = (capsuleInfo.top - statusBarHeight) * 2 + capsuleInfo.height
     
     // Android 导航栏高度多加 4
     navbarHeight = isIos ? navbarHeight : navbarHeight + 4
     
-    // header高度
+    // 整个 header 高度
     const headerHeight = statusBarHeight + navbarHeight
-    console.log({ systemInfo: info, statusBarHeight: statusBarHeight, headerHeight, capsuleInfo})
+
+    // console.log({ systemInfo: info, statusBarHeight: statusBarHeight, headerHeight, capsuleInfo, navbarHeight})
+
     // 如果是 Mac 或 windows 电脑平台则不允许使用 并 显示小程序二维码
     if (!system.includes('android') && !system.includes('ios')) {
       desktopPopupTips = true
     }
     // statusBarHeight 离顶部导航栏位置
-    // headerHeight 顶部导航栏距离顶部 Y 轴位置
     set({ systemInfo: info, statusBarHeight, headerHeight, isIos, desktopPopupTips})