feat: agent top card ui

src/app.config.ts

@@ -1,5 +1,6 @@
 export default defineAppConfig({
   pages: [
+    'pages/chat/index',
     'pages/profile/index',
     'pages/agent-gen/index',
     'pages/agent/index',
@@ -16,7 +17,7 @@ export default defineAppConfig({
     'pages/editor-pages/editor-qrcode/index',
 
 
-    'pages/chat/index',
+    
     'pages/editor-pages/editor-channels/index',
     'pages/analysis/index',
     'pages/knowledge/index',

src/app.less

@@ -7,6 +7,7 @@
 :root{
   // 主题色
   --color-primary: #317CFA;
+  --color-primary-rgb: 49, 124, 250;
   --color-primary-light: rgba(49, 124, 250, 0.1);
   --color-primary-dark: #1E6FF8;
   --color-text-primary: #262626;
@@ -170,6 +171,11 @@
   font-size: 14px;
   background-color: var(--color-primary);
 }
+.button-rounded.button-primary-light{
+  font-size: 14px;
+  color: var(--color-primary);
+  background-color: rgba(var(--color-primary-rgb), .1);
+}
 
 
 .social-media-icon{

src/components/custom-share/share-popup/index.module.less

@@ -1,50 +1,11 @@
-.shareButton{
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  background-color: red;
-}
 .container{
-  position: fixed;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index:9999999;
-}
-.cover{
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 1;
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(5px);
+  padding-bottom: 40px;
 }
 
-.popup{
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 2;
-  padding: 48px 0 40px;
-  width: 375px;
-  height: 262px;
-  border-radius: 20px 20px 0 0;
-  background-color: white;
-}
+
 .optionButtons{
   display: flex;
-  gap: 67.5px;
-  padding: 0 48px 40px;
+  justify-content: space-around;
 }
 .optionButton{
   position: relative;
@@ -52,7 +13,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 12px;
   flex-direction: column;
   
 }
@@ -65,11 +25,3 @@
   line-height: 22px;
   font-size: 12px;
 }
-.cancelButton{
-  border-top: 1px solid rgba(#000, .04);
-  text-align: center;
-  height: 60px;
-  line-height: 60px;
-  color: #9bbd9b;
-  font-size: 14px;
-}

src/components/custom-share/share-popup/index.tsx

@@ -10,14 +10,15 @@ import ShareCard, {type IShareCard} from "@/components/custom-share/share-card/i
 import CustomShareComponent from "@/components/custom-share/CustomShareComponent";
 import { HOME_URL } from '@/config'
 import { useCurrentCharacter } from "@/store/characterStore";
+import Popup from "@/components/popup/popup";
 
 
 interface Props {
-  visible: boolean;
+  show: boolean;
   character: ICharacter | null;
-  onClose: () => void;
+  setShow: (show:boolean) => void;
 }
-export default ({ visible, onClose, character }: Props) => {
+export default ({ show, setShow, character }: Props) => {
   const currentCharacter = useCurrentCharacter();
   const shareCardRef = useRef<IShareCard>(null)
   // todo: 优化至点击后再去生成小程序二维码
@@ -28,9 +29,7 @@ export default ({ visible, onClose, character }: Props) => {
       }
     }, [character]
   );
-  const handleClose = () => {
-    onClose?.();
-  };
+  
 
   const handleSavePicture = () => {
     console.log(shareCardRef?.current)
@@ -69,33 +68,29 @@ export default ({ visible, onClose, character }: Props) => {
 
   return (
     <RootPortal>
-      { renderSharePicture() } 
-      {/* 显示分享弹窗后再进行分享逻辑 */}
-      {visible && (<View className={style.container}>
-        <View className={style.cover} onClick={handleClose}></View>
-        <View className={style.popup}>
+      { renderSharePicture() }
+      <Popup show={show} setShow={setShow}>
+        {/* 显示分享弹窗后再进行分享逻辑 */}
+        <View className={style.container}>
           <View className={style.optionButtons}>
-            <View className={style.optionButton}>
-              <Image src={IconShareWechat} className={style.icon}></Image>
-              <View className={style.buttonText}>微信好友</View>
-              <Button openType="share" className="share-button"></Button>
-            </View>
-            <View className={style.optionButton} onClick={handleSavePicture}>
-              <Image src={IconShareQrcode} className={style.icon}></Image>
-              <View className={style.buttonText}>保存图片</View>
-            </View>
-            <View className={style.optionButton} onClick={handleCopyLink}>
-              <Image src={IconShareLink} className={style.icon}></Image>
-              <View className={style.buttonText}>复制链接</View>
+              <View className={style.optionButton}>
+                <Image src={IconShareWechat} className={style.icon}></Image>
+                <View className={style.buttonText}>微信好友</View>
+                <Button openType="share" className="share-button"></Button>
+              </View>
+              <View className={style.optionButton} onClick={handleSavePicture}>
+                <Image src={IconShareQrcode} className={style.icon}></Image>
+                <View className={style.buttonText}>保存图片</View>
+              </View>
+              <View className={style.optionButton} onClick={handleCopyLink}>
+                <Image src={IconShareLink} className={style.icon}></Image>
+                <View className={style.buttonText}>复制链接</View>
+              </View>
             </View>
-          </View>
-          <View className={style.cancelButton} onClick={handleClose}>
-            取 消
-          </View>
+          
+          {ShareCardComponent}
         </View>
-        
-        {ShareCardComponent}
-      </View>)}
+      </Popup> 
     </RootPortal>
   );
 };

src/components/icon/icon-location-gray/index.tsx

@@ -1,5 +1,5 @@
 import { Image } from '@tarojs/components'
-import Icon from '@/images/svgs/icon-edit-gray.svg'
+import Icon from '@/images/svgs/icon-location.svg'
 export default () => {
   return (
     <Image src={Icon} mode="widthFix" style={{width: '12px', height: '12px'}}></Image>

src/components/icon/icon-plus-blue/index.tsx

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

src/components/nav-bar-normal/index.module.less

@@ -19,7 +19,7 @@
   align-items: center;
   padding-left: 6px;
   width: 100%;
-  height: 44px;
+  height: 54px;
   position: relative;
 }
 

src/components/popup/popup/index.module.less

@@ -20,6 +20,8 @@
   background-color: white;
   transition: transform .14s ease-in;
   transform: translateY(100%);
+  padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
+	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
 }
 .show{
   transform: translateY(0%);

src/components/qrcode-upload-tips/index.tsx

@@ -0,0 +1,15 @@
+import { View } from "@tarojs/components";
+import IconPlusBig from "@/components/icon/icon-plus-big";
+export default ()=> {
+  return (
+    <View>
+      <View className="flex-center flex-col">
+        <View className="w-36 h-36 rounded-full flex-center mb-12 bg-primary">
+          <IconPlusBig/>
+        </View>
+        <View className="text-14 leading-22 font-medium mb-4">上传你的二维码</View>
+        <View className="text-12 leading-20 text-gray-45">方便客户快速沟通，扫码即可联系你</View>
+      </View>
+    </View>
+  )
+}

src/components/wemeta-tabs/index.module.less

@@ -37,7 +37,7 @@
   align-items: center;
   justify-content: center;
   font-weight: 500;
-  padding: 8px 16px;
+  padding: 8px 24px;
   font-size: 12px;
   border-radius: 20px;
   color: rgba(#000, .45);

src/images/svgs/icon-plus-blue.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.75 6.75V12H7.25V6.75H12.5V5.25H7.25V0H5.75V5.25H0.5V6.75H5.75Z" fill="#317CFA"/>
+</svg>

src/pages/editor-pages/editor-qrcode/index.tsx

@@ -7,7 +7,7 @@ import style from "./index.module.less";
 
 import { useComponentStore } from '@/store/componentStore'
 import { useCharacterStore } from '@/store/characterStore'
-import IconPlusBig from "@/components/icon/icon-plus-big";
+import QrcodeUploadTips from "@/components/qrcode-upload-tips";
 
 import Taro, {useRouter, useUnload} from "@tarojs/taro";
 export default function Index() {
@@ -62,13 +62,7 @@ export default function Index() {
       <View className="px-16 pt-4">
         <View className={style.card}>
           <View>
-            <View className="flex-center flex-col">
-              <View className="w-36 h-36 rounded-full flex-center mb-12 bg-primary">
-                <IconPlusBig/>
-              </View>
-              <View className="text-14 leading-22 font-medium mb-4">上传你的二维码</View>
-              <View className="text-12 leading-20 text-gray-45">方便客户快速沟通，扫码即可联系你</View>
-            </View>
+            <QrcodeUploadTips />
           </View>
           {/* <Image style={{maxWidth: '344px'}} src="https://cdn.wehome.cn/cmn/jpg/187/META-H8UKWHWU-2JNUAG2BARJF55VHU9QS3-4YZZNDAM-2X.jpg" mode="widthFix"></Image> */}
         </View>

src/pages/profile/components/agent-qrcode/index.module.less

@@ -0,0 +1,26 @@
+.container{
+  padding-top: 12px;
+  height: 70vh;
+  overflow: auto;
+}
+.card{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 12px;
+  padding: 20px;
+  width: 100%;
+  height: 415px;
+  border-radius: 16px;
+  border: 1px solid rgba(#000, .05);
+}
+
+.bottomButtons{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 20px;
+  height: 88px;
+}

src/pages/profile/components/agent-qrcode/index.tsx

@@ -0,0 +1,29 @@
+import { View } from "@tarojs/components";
+import { useAppStore } from "@/store/appStore";
+import Popup from "@/components/popup/popup";
+import { useState } from "react";
+import style from './index.module.less';
+import QrcodeUploadTips from "@/components/qrcode-upload-tips";
+interface IProps {
+  show: boolean;
+  setShow: (show: boolean) => void;
+}
+export default ({ show, setShow }: IProps) => {
+  
+  return (
+    <View className="relative">
+      <Popup setShow={setShow} show={show} title="二维码">
+        <View className={style.container}>
+          <View className={style.card}>
+            <QrcodeUploadTips />
+          </View>
+          <View className={style.bottomButtons}>
+            <View className="pr-16">替换</View>
+            <View className="text-gray-25">|</View>
+            <View className="pl-16">清空</View>
+          </View>
+        </View>
+      </Popup>
+    </View>
+  );
+};

src/pages/profile/components/agent-swap/index.module.less

@@ -0,0 +1,32 @@
+.tabContainer{
+  height: 432px;
+  margin-bottom: 15px;
+  overflow-y: auto;
+}
+.card{
+  margin-bottom: 12px;
+  padding: 20px;
+  width: 315px;
+  height: 144px;
+  border-radius: 12px;
+  background-color: rgba(#000, .03);
+}
+.cardActive{
+  .card();
+  background-color: rgba(var(--color-primary-rgb), .06);
+  border: 1px solid var(--color-primary);
+}
+.icons{
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.icon{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 100%;
+  background-color: rgba(#000, .05);
+}

src/pages/profile/components/agent-swap/index.tsx

@@ -0,0 +1,159 @@
+import { View } from "@tarojs/components";
+import style from "./index.module.less";
+import TagCertificated from "@/components/tag-certificated";
+
+import IconPhoneGray from "@/components/icon/icon-phone-gray";
+import IconMailGray from "@/components/icon/icon-mail-gray";
+import IconLocationGray from "@/components/icon/icon-location-gray";
+import IconQRCodeGray from "@/components/icon/icon-qrcode-gray";
+import IconPlusBlue from "@/components/icon/icon-plus-blue";
+import { useAppStore } from "@/store/appStore";
+import Popup from "@/components/popup/popup";
+import { useState } from "react";
+import WemetaTabs from "@/components/wemeta-tabs/index";
+interface IProps {
+  show: boolean;
+  setShow: (show: boolean) => void;
+}
+export default ({ show, setShow }: IProps) => {
+  const tabList = [
+    {
+      key: "1",
+      label: "个人",
+      children: (
+        <>
+          <View className="pt-12">
+            <View className={style.tabContainer}>
+              <View className={style.card}>
+                <View className="flex items-start mb-24">
+                  <View className="flex flex-col flex-1">
+                    <View className="flex items-end gap-8 text-gray-65">
+                      <View className="text-20 font-medium leading-28 text-black">
+                        张三
+                      </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>
+                </View>
+                <View className={style.icons}>
+                  <View className={style.icon}>
+                    <IconPhoneGray />
+                  </View>
+                  <View className={style.icon}>
+                    <IconMailGray />
+                  </View>
+                  <View className={style.icon}>
+                    <IconLocationGray />
+                  </View>
+                  <View className={style.icon}>
+                    <IconQRCodeGray />
+                  </View>
+                </View>
+              </View>
+              <View className={style.cardActive}>
+                <View className="flex items-start mb-24">
+                  <View className="flex flex-col flex-1">
+                    <View className="flex items-end gap-8 text-gray-65">
+                      <View className="text-20 font-medium leading-28 text-black">
+                        张三
+                      </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>
+                </View>
+                <View className={style.icons}>
+                  <View className={style.icon}>
+                    <IconPhoneGray />
+                  </View>
+                  <View className={style.icon}>
+                    <IconMailGray />
+                  </View>
+                  <View className={style.icon}>
+                    <IconLocationGray />
+                  </View>
+                  <View className={style.icon}>
+                    <IconQRCodeGray />
+                  </View>
+                </View>
+              </View>
+              <View className={style.card}>
+                <View className="flex items-start mb-24">
+                  <View className="flex flex-col flex-1">
+                    <View className="flex items-end gap-8 text-gray-65">
+                      <View className="text-20 font-medium leading-28 text-black">
+                        张三
+                      </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>
+                </View>
+                <View className={style.icons}>
+                  <View className={style.icon}>
+                    <IconPhoneGray />
+                  </View>
+                  <View className={style.icon}>
+                    <IconMailGray />
+                  </View>
+                  <View className={style.icon}>
+                    <IconLocationGray />
+                  </View>
+                  <View className={style.icon}>
+                    <IconQRCodeGray />
+                  </View>
+                </View>
+              </View>
+              <View className="button-rounded button-primary-light gap-8 mb-15">
+              <IconPlusBlue />
+              <View>创建新的智能体</View>
+            </View>
+            </View>
+          </View>
+        </>
+      ),
+    },
+    {
+      key: "2",
+      label: "企业",
+      children: (
+        <>
+          <View className="pt-12">
+            <View className={style.tabContainer}>
+              <View className={style.card}>
+                <View className="flex flex-col items-center">
+                  <View className="text-16 leading-24 font-medium mb-4">你还没有企业配置的名片</View>
+                  <View className="text-12 text-gray-45 leading-20 mb-24">企业小蓝本由公司创建并授权，可引用企业知识内容</View>
+                  <View className="text-primary font-medium leading-22">联系我们</View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </>
+      ),
+    },
+  ];
+  return (
+    <View className="relative">
+      <Popup setShow={setShow} show={show} title="小蓝本">
+        <WemetaTabs current="1" list={tabList}></WemetaTabs>
+      </Popup>
+    </View>
+  );
+};

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

@@ -1,79 +1,131 @@
-import { View } from "@tarojs/components"
-import style from './index.module.less'
-import TagCertificated from '@/components/tag-certificated'
-import IconSwapBlack from '@/components/icon/icon-swap-black'
-import IconChatWhite from '@/components/icon/icon-chat-white'
-import IconQRCodeBlack from '@/components/icon/icon-qrcode-black'
-import IconSendBlack from '@/components/icon/icon-send-black'
-import IconEditBlack from '@/components/icon/icon-edit-black'
-import IconMoreBlack from '@/components/icon/icon-more-black'
+import { useState } from 'react';
+import { View } from "@tarojs/components";
+import style from "./index.module.less";
+import TagCertificated from "@/components/tag-certificated";
+import IconSwapBlack from "@/components/icon/icon-swap-black";
+import IconChatWhite from "@/components/icon/icon-chat-white";
+import IconQRCodeBlack from "@/components/icon/icon-qrcode-black";
+import IconSendBlack from "@/components/icon/icon-send-black";
+import IconEditBlack from "@/components/icon/icon-edit-black";
+import IconMoreBlack from "@/components/icon/icon-more-black";
 
-import IconPhoneGray from "@/components/icon/icon-phone-gray"
-import IconMailGray from "@/components/icon/icon-mail-gray"
-import IconLocationGray from "@/components/icon/icon-location-gray"
+import IconPhoneGray from "@/components/icon/icon-phone-gray";
+import IconMailGray from "@/components/icon/icon-mail-gray";
+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';
 
-export default ()=> {
+export default () => {
   const headerHeight = useAppStore((state) => state.headerHeight);
+  const [showAgentSwap, setShowAgentSwap] = useState(false);
+  const [showAgentQRcode, setShowAgentQRcode] = useState(false);
+  const [showShare, setShowShare] = useState(true);
+
   // 自定义背景样式
   const bgImageStyle = {
     marginTop: -headerHeight,
     // background: `linear-gradient(rgba(242, 244, 245, 0) 0%, rgba(242, 244, 245, .8) 80% , rgba(242, 244, 245,1) 100%), url(${customBgImg})`,
     backgroundImage: `url(https://cdn.wehome.cn/cmn/png/53/META-H8UKWHWU-2JNUAG2BARJF55VHU9QS3-YBQGHDAM-IW.png)`,
-  }
+  };
   return (
     <View className="relative">
       <View className={style.topBg} style={bgImageStyle}></View>
       <View className={style.topBarContainer}>
-      <View className={style.topBar} >
-        <View className="px-8 mb-16">
-          <View className="flex items-start mb-24">
-            <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 className={style.topBar}>
+          <View className="px-8 mb-16">
+            <View className="flex items-start mb-24">
+              <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>
-              <View className="flex items-center gap-2">
-                <View className="text-12 leading-20 truncate max-w-[188px]">北京茗视光眼科医院管理有限公司</View>
-                <TagCertificated/>
+              <View
+                className={style.boxButton}
+                onClick={() => {
+                  setShowAgentSwap(true);
+                }}
+              >
+                <IconSwapBlack />
               </View>
             </View>
-            <View className={style.boxButton}>
-              <IconSwapBlack/>
-            </View>
-          </View>
-          <View className="flex items-center gap-8">
-            <View className="flex-1">
-              <View className="button-rounded button-primary">
-                <IconChatWhite/>
-                和TA聊聊
+            <View className="flex items-center gap-8">
+              <View className="flex-1">
+                <View className="button-rounded button-primary">
+                  <IconChatWhite />
+                  和TA聊聊
+                </View>
+              </View>
+              <View 
+                className={style.boxButton}
+                onClick={() => {
+                  setShowAgentSwap(true);
+                }}
+              >
+                <IconQRCodeBlack />
+              </View>
+              <View 
+                className={style.boxButton}
+                onClick={()=> {
+                  setShowShare(true)
+                }}
+              >
+                <IconSendBlack />
+              </View>
+              <View 
+                className={style.boxButton}
+                onClick={()=> {
+                  Taro.navigateTo({url: '/pages/editor-contact/index'})
+                }}
+              >
+                <IconEditBlack />
+              </View>
+              <View className={style.boxButton}>
+                <IconMoreBlack />
               </View>
-            </View>
-            <View className={style.boxButton}>
-              <IconQRCodeBlack/>
-            </View>
-            <View className={style.boxButton}>
-              <IconSendBlack/>
-            </View>
-            <View className={style.boxButton}>
-              <IconEditBlack/>
-            </View>
-            <View className={style.boxButton}>
-              <IconMoreBlack/>
             </View>
           </View>
-        </View>
 
-        <View className="rounded-12 bg-white p-20">
-          <View className="text-14 leading-22 font-medium border-b border-b-gray h-34 mb-22">联系方式</View>
-          <View className="flex flex-col gap-20 text-12 leading-20">
-            <View className="flex items-center gap-12"><View className={style.icon}><IconPhoneGray/></View><View>137 1234 1234</View></View>
-            <View className="flex items-center gap-12"><View className={style.icon}><IconMailGray/></View><View>zhangsan@eyeclear.com</View></View>
-            <View className="flex items-center gap-12"><View className={style.icon}><IconLocationGray/></View><View>浙江省杭州市上城区钱江国际时代广场2幢</View></View>
+          <View className="rounded-12 bg-white p-20">
+            <View className="text-14 leading-22 font-medium border-b border-b-gray h-34 mb-22">
+              联系方式
+            </View>
+            <View className="flex flex-col gap-20 text-12 leading-20">
+              <View className="flex items-center gap-12">
+                <View className={style.icon}>
+                  <IconPhoneGray />
+                </View>
+                <View>137 1234 1234</View>
+              </View>
+              <View className="flex items-center gap-12">
+                <View className={style.icon}>
+                  <IconMailGray />
+                </View>
+                <View>zhangsan@eyeclear.com</View>
+              </View>
+              <View className="flex items-center gap-12">
+                <View className={style.icon}>
+                  <IconLocationGray />
+                </View>
+                <View>浙江省杭州市上城区钱江国际时代广场2幢</View>
+              </View>
+            </View>
           </View>
         </View>
-      </View> 
       </View>
-      </View>
-  )
-}
+
+      <AgentSwap show={showAgentSwap} setShow={setShowAgentSwap}></AgentSwap>
+      <AgentQRCode show={showAgentQRcode} setShow={setShowAgentQRcode}/>
+      <SharePopup show={showShare} setShow={setShowShare} character={null}></SharePopup>
+    </View>
+  );
+};

src/store/appStore.ts

@@ -51,20 +51,21 @@ export const useAppStore = create<AppState>((set) => ({
     set({keyboardHeight: height})
   },
   setSystemInfo: (info) => {
-    // 状态栏高度
-    const statusBarHeight = (isNaN(info.statusBarHeight!) ? 24 : info.statusBarHeight || 47) - 3
-    const topDistance = statusBarHeight + 43
+    // 状态栏高度 - 6 偏差值为垂直居中对齐胶囊按钮
+    const statusBarHeight = (isNaN(info.statusBarHeight!) ? 24 : info.statusBarHeight || 47) - 6;
     const system = info.system.toLowerCase() 
     const isIos = system.includes('ios')
     let desktopPopupTips = false;
-    // const capsuleInfo = Taro.getMenuButtonBoundingClientRect()
+    const capsuleInfo = Taro.getMenuButtonBoundingClientRect()
     // 胶囊热区 = 胶囊和状态栏之间的留白 * 2 (保持胶囊和状态栏上下留白一致) * 2(设计上为了更好看) + 胶囊高度
-    // const navbarHeight = (capsuleInfo.top - statusBarHeight) * 4 + capsuleInfo.height
+    let navbarHeight = (capsuleInfo.top - statusBarHeight) * 4 + capsuleInfo.height
+    
     // Android 导航栏高度多加 4
-    const navbarHeight = isIos ? 44 : 48
-    // 设置header高度
+    navbarHeight = isIos ? navbarHeight : navbarHeight + 4
+    
+    // header高度
     const headerHeight = statusBarHeight + navbarHeight
-    console.log({ systemInfo: info, topDistance, statusBarHeight: statusBarHeight, headerHeight})
+    console.log({ systemInfo: info, statusBarHeight: statusBarHeight, headerHeight, capsuleInfo})
     // 如果是 Mac 或 windows 电脑平台则不允许使用 并 显示小程序二维码
     if (!system.includes('android') && !system.includes('ios')) {
       desktopPopupTips = true

tailwind.config.js

@@ -46,6 +46,7 @@ module.exports = {
       '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)',
       'gray-sub': 'rgba(0, 0, 0, 0.75)',