兼容h5

config/dev.ts

@@ -7,7 +7,7 @@ module.exports = {
   h5: {
     devServer: {
       port: 10086,
-      host: "localhost",
+      host: "192.168.10.5",
       proxy: {
         "/api": {
           target: "http://127.0.0.1:8181",

package-lock.json

@@ -7,6 +7,7 @@
     "": {
       "name": "game-discuz",
       "version": "1.0.0",
+      "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.7.7",

src/components/comment-list/item.tsx

@@ -29,7 +29,14 @@ const CommentListItem = ({ commentData, isChild = false }) => {
                 }}
               >
                 <View className="flex items-center mr-[20rpx]">
-                  <View className="w-[35px] h-[35px] rounded-[50%] bg-[#000] overflow-hidden bg-[url('https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png')] bg-cover bg-center"></View>
+                  <View
+                    className="w-[35px] h-[35px] rounded-[50%] bg-[#000] overflow-hidden bg-cover bg-center"
+                    style={{
+                      backgroundImage: item.avatar_url
+                        ? `url('${item.avatar_url}')`
+                        : "none",
+                    }}
+                  ></View>
                 </View>
                 <View>
                   <View className="text-[12px] text-[#909090]">
@@ -63,6 +70,9 @@ const CommentListItem = ({ commentData, isChild = false }) => {
                 <CommentInput
                   postId={postId}
                   parentCommentId={parentCommentId}
+                  onOK={() => {
+                    setShowCommentInput(false);
+                  }}
                   onClose={() => {
                     setShowCommentInput(false);
                   }}

src/components/fllower-button/index.tsx

@@ -50,23 +50,28 @@ export default function MoreButton({
       onClick && onClick(postIndex);
     } else if (value === "post_report") {
       navigateTo({
-        url: "/pages/report/index",
-        events: {
-          onBack: (data) => console.log("返回数据:", data),
-          onUpdate: (data) => console.log("更新数据:", data),
-        },
-        success: function (res) {
-          // 通过eventChannel向被打开页面传送数据
-          console.log("===");
-          res.eventChannel.emit("init", postItem);
-        },
+        url: `/pages/report/index?target_type=post&target_id=${postId}`,
+        // events: {
+        //   onBack: (data) => console.log("返回数据:", data),
+        //   onUpdate: (data) => console.log("更新数据:", data),
+        // },
+        // success: function (res) {
+        //   // 通过eventChannel向被打开页面传送数据
+        //   console.log("===");
+        //   res.eventChannel.emit("init", postItem);
+        // },
       });
     }
     setShowMore(false);
   };
   return (
     <>
-      <View onClick={() => setShowMore(true)}>
+      <View
+        onClick={(e) => {
+          e.stopPropagation();
+          setShowMore(true);
+        }}
+      >
         <More size={12} color="#949494" />
       </View>
       <ActionSheet
@@ -74,7 +79,9 @@ export default function MoreButton({
         cancelText="取消"
         options={moreOptions}
         onSelect={handleSelectMore}
-        onCancel={() => setShowMore(false)}
+        onCancel={() => {
+          setShowMore(false);
+        }}
       />
     </>
   );

src/components/post-list/index.tsx

@@ -76,6 +76,12 @@ const PostList = () => {
             Dialog.close("followed_dialog");
           });
         },
+        onCancel: () => {
+          Dialog.close("followed_dialog");
+        },
+        onClose: () => {
+          Dialog.close("followed_dialog");
+        },
       });
     } else {
       followApi({ followee_id: followeeId }).then(() => {
@@ -101,17 +107,22 @@ const PostList = () => {
       {postList.map((item: any, index: number) => {
         return (
           <View
+            key={item.id}
             className="post-list-item  bg-[#fff] p-[10px] mb-[10px]"
-            onClick={() =>
-              navigateTo({ url: `/pages/detail/index?id=${item.id}` })
-            }
           >
             <View className="flex items-center justify-between">
               <View className="flex items-center">
-                <View className="w-[40px] h-[40px] rounded-[50%] bg-[#000] overflow-hidden bg-[url('https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png')] bg-cover bg-center"></View>
+                <View
+                  className="w-[40px] h-[40px] rounded-[50%] bg-[#000] overflow-hidden bg-cover bg-center"
+                  style={{
+                    backgroundImage: item.user.avatar_url
+                      ? `url('${item.user.avatar_url}')`
+                      : "none",
+                  }}
+                ></View>
                 <View className="ml-[5px]">
                   <View className="text-[14px] font-[800] text-[#9c9dee]">
-                    {item.user.nickname || "微信用户"}
+                    {item.user.nickname || item.user.username || "微信用户"}
                   </View>
                   {item.user.is_official ? (
                     <View className="text-[12px] text-[#949494]">
@@ -125,9 +136,10 @@ const PostList = () => {
               <View className="flex items-center">
                 <View
                   className="flex items-center justify-center mr-[12px] text-[12px] bg-[#f8f8f8] text-[#949494] rounded-[20px] h-[25px] w-[60px] text-center"
-                  onClick={() =>
-                    handleFollowClick(item.user_id, item.is_followed)
-                  }
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleFollowClick(item.user_id, item.is_followed);
+                  }}
                 >
                   {item.is_followed ? <></> : <Plus color="#1874d0" />}
                   <Text>{item.is_followed ? "已关注" : "关注"}</Text>
@@ -145,67 +157,79 @@ const PostList = () => {
                 )}
               </View>
             </View>
-            <View className="text-[14px] text-[#333] pt-[20px]">
-              {strSlice(item.content, 100)}
-              {item.content.length > 100 && (
-                <Text className="text-[#1874d0]">全文</Text>
-              )}
-            </View>
-            <View className="mt-[10px]">
-              <Grid
-                columns={item.media_url.length < 3 ? 2 : 3} // 这里，如果图片小于3张，则columns为2，如果图片大于等于3张，则columns为3
-                gap={7}
-                style={
-                  {
-                    "--nutui-grid-item-content-padding": "0px",
-                    "--nutui-grid-item-content-margin": "0px",
-                  } as any
-                }
-              >
-                {item.media_url.map((ite: any, index: number) => {
-                  return (
-                    <GridItem>
-                      <Image
-                        src={ite.src}
-                        mode="aspectFill"
-                        height="100"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          setMediaUrl(item.media_url);
-                          setInit(index + 1);
+            <View
+              onClick={() =>
+                navigateTo({ url: `/pages/detail/index?id=${item.id}` })
+              }
+            >
+              <View className="text-[14px] text-[#333] pt-[20px]">
+                {strSlice(item.content, 100)}
+                {item.content.length > 100 && (
+                  <Text className="text-[#1874d0]">全文</Text>
+                )}
+              </View>
+              <View className="mt-[10px]">
+                <Grid
+                  columns={item.media_url.length < 3 ? 2 : 3} // 这里，如果图片小于3张，则columns为2，如果图片大于等于3张，则columns为3
+                  gap={7}
+                  style={
+                    {
+                      "--nutui-grid-item-content-padding": "0px",
+                      "--nutui-grid-item-content-margin": "0px",
+                      "--nutui-grid-border-color": "transparent",
+                    } as any
+                  }
+                >
+                  {item.media_url.map((ite: any, index: number) => {
+                    return (
+                      <GridItem>
+                        <Image
+                          width="100%"
+                          height="100px"
+                          src={ite.src}
+                          mode="widthFix"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            setMediaUrl(item.media_url);
+                            setInit(index + 1);
 
-                          setShowPreview(true);
-                        }}
-                      />
-                    </GridItem>
-                  );
-                })}
-              </Grid>
-            </View>
-            <View className="mt-[10px] pl-[20px] pr-[20px] flex items-center justify-between">
-              <View className="flex items-center">
-                <Message size={16} color="#949494" />
-                <Text className="ml-[5px] text-[16px] text-[#949494]">
-                  {item.comment_count}
-                </Text>
+                            setShowPreview(true);
+                          }}
+                        />
+                      </GridItem>
+                    );
+                  })}
+                </Grid>
               </View>
-              <View
-                className="flex items-center"
-                onClick={() => {
-                  handleInteraction(
-                    item.id,
-                    item.interaction_type === "praise" ? "dispraise" : "praise"
-                  );
-                }}
-              >
-                {item.interaction_type === "praise" ? (
-                  <HeartFill size={16} color="#ec4342" />
-                ) : (
-                  <Heart size={16} color="#949494" />
-                )}
-                <Text className="ml-[5px] text-[16px] text-[#949494]">
-                  {item.like_count}
-                </Text>
+              <View className="mt-[10px] pl-[20px] pr-[20px] flex items-center justify-between">
+                <View className="flex items-center">
+                  <Message size={16} color="#949494" />
+                  <Text className="ml-[5px] text-[16px] text-[#949494]">
+                    {item.comment_count}
+                  </Text>
+                </View>
+                <View
+                  className="flex items-center"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleInteraction(
+                      item.id,
+                      item.interaction_type === "praise"
+                        ? "dispraise"
+                        : "praise"
+                    );
+                  }}
+                >
+                  {item.interaction_type === "praise" ? (
+                    <HeartFill size={16} color="#ec4342" />
+                  ) : (
+                    <Heart size={16} color="#949494" />
+                  )}
+                  <Text className="ml-[5px] text-[16px] text-[#949494]">
+                    {item.like_count}
+                  </Text>
+                </View>
               </View>
             </View>
           </View>

src/pages/detail/index.tsx

@@ -1,7 +1,7 @@
 import { View } from "@tarojs/components";
-import { pxTransform, useLoad } from "@tarojs/taro";
+import { pxTransform, useLoad, navigateBack } from "@tarojs/taro";
 import { useState } from "react";
-import { Plus } from "@nutui/icons-react-taro";
+import { ArrowLeft, Plus } from "@nutui/icons-react-taro";
 import { Text } from "@tarojs/components";
 import {
   Dialog,
@@ -9,6 +9,7 @@ import {
   ImagePreview,
   Swiper,
   Toast,
+  NavBar,
 } from "@nutui/nutui-react-taro";
 import { unfollowApi, followApi } from "../../api/interaction";
 import { postDetailApi } from "../../api/post";
@@ -23,6 +24,7 @@ const Detail = () => {
 
   // 关注/不关注
   const handleFollowClick = (followeeId: number, is_followed) => {
+    console.log(followeeId, is_followed);
     if (is_followed) {
       Dialog.open("followed_dialog", {
         title: "提示",
@@ -34,14 +36,17 @@ const Detail = () => {
               duration: 2,
               lockScroll: true,
             });
-            const data = [...postData];
-            data.forEach((item: any) => {
-              item.is_followed = false;
-            });
+            const data = { ...postData, is_followed: false };
             setPostData(data);
             Dialog.close("followed_dialog");
           });
         },
+        onCancel: () => {
+          Dialog.close("followed_dialog");
+        },
+        onClose: () => {
+          Dialog.close("followed_dialog");
+        },
       });
     } else {
       followApi({ followee_id: followeeId }).then(() => {
@@ -50,10 +55,7 @@ const Detail = () => {
           duration: 2,
           lockScroll: true,
         });
-        const data = [...postData];
-        data.forEach((item: any) => {
-          item.is_followed = true;
-        });
+        const data = { ...postData, is_followed: true };
         setPostData(data);
       });
     }
@@ -72,9 +74,30 @@ const Detail = () => {
   });
   return postData ? (
     <View>
+      <NavBar
+        back={
+          <>
+            <ArrowLeft />
+            返回
+          </>
+        }
+        onBackClick={(e) => {
+          e.preventDefault();
+          navigateBack({ delta: 1 });
+        }}
+      >
+        帖子详情
+      </NavBar>
       <View className="p-[10px] flex items-center justify-between">
         <View className="flex items-center">
-          <View className="w-[40px] h-[40px] rounded-[50%] bg-[#000] overflow-hidden bg-[url('https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png')] bg-cover bg-center"></View>
+          <View
+            className="w-[40px] h-[40px] rounded-[50%] bg-[#000] overflow-hidden  bg-cover bg-center"
+            style={{
+              backgroundImage: postData.user.avatar_url
+                ? `url('${postData.user.avatar_url}')`
+                : "none",
+            }}
+          ></View>
           <View className="ml-[10rpx]">
             <View className="text-[14px] font-[800] text-[#9c9dee]">
               {postData.user.nickname || "微信用户"}
@@ -134,6 +157,8 @@ const Detail = () => {
         {postData.media_url.map((item, index) => (
           <Swiper.Item key={item}>
             <Image
+              width="100%"
+              height="100%"
               onClick={() => {
                 setShowPreview(true);
                 setInit(index + 1);
@@ -156,6 +181,8 @@ const Detail = () => {
         onClose={() => setShowPreview(false)}
         indicator
       />
+      <Toast id="follow_success" />
+      <Dialog id="followed_dialog" />
     </View>
   ) : (
     <></>

src/pages/index/index.tsx

@@ -11,20 +11,20 @@ function Index() {
     <View className="index">
       <View className="p-[10px]  bg-[#fff]">
         <View className="h-25 flex justify-between">
-          <View className="w-[22%] pt-[10px] pb-[10px] pl-[5px] border-[1rpx] border-solid border-[#e0e0e0] rounded-[5px] shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">
+          <View className="w-[22%] pt-[10px] pb-[10px] pl-[5px] border-[1rpx] border-solid border-[#e0e0e0] rounded-[5px] shadow-[0_15px_10px_-16px_rgba(0,0,0,0.3)]">
             <View className="text-[14px] font-[800] text-[#333]">福利中心</View>
             <View className="text-[12px] text-[#949494]">登录领奖</View>
           </View>
-          <View className="w-[22%] pt-[10px] pb-[10px] pl-[5px] border-[1rpx] border-solid border-[#e0e0e0]  rounded-[5px] shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">
+          <View className="w-[22%] pt-[10px] pb-[10px] pl-[5px] border-[1rpx] border-solid border-[#e0e0e0]  rounded-[5px] shadow-[0_15px_10px_-16px_rgba(0,0,0,0.3)]">
             <View className="text-[14px] font-[800] text-[#333]">游戏攻略</View>
             <View className="text-[12px] text-[#949494]">最新资讯</View>
           </View>
-          <View className="w-[22%] pt-[10px] pb-[10px] pl-[5px] border-[1rpx] border-solid border-[#e0e0e0]  rounded-[5px] shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">
+          <View className="w-[22%] pt-[10px] pb-[10px] pl-[5px] border-[1rpx] border-solid border-[#e0e0e0]  rounded-[5px] shadow-[0_15px_10px_-16px_rgba(0,0,0,0.3)]">
             <View className="text-[14px] font-[800] text-[#333]">组队开黑</View>
             <View className="text-[12px] text-[#949494]">寻找队友</View>
           </View>
           <View
-            className="w-[22%] pt-[10px] pb-[10px] pl-[5px] border-[1rpx] border-solid border-[#e0e0e0]  rounded-[5px] shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]"
+            className="w-[22%] pt-[10px] pb-[10px] pl-[5px] border-[1rpx] border-solid border-[#e0e0e0]  rounded-[5px] shadow-[0_15px_10px_-16px_rgba(0,0,0,0.3)]"
             onClick={() => {
               navigateTo({ url: "/pages/self/index" });
             }}
@@ -33,7 +33,7 @@ function Index() {
             <View className="text-[12px] text-[#949494]">我的信息</View>
           </View>
         </View>
-        <View className="pt-[20px]">
+        {/* <View className="pt-[20px]">
           <View className="flex items-center">
             <Mail color="#6682f0" />
             <Text className="ml-[5px] text-[18px] font-[800] text-[#333]">
@@ -48,7 +48,7 @@ function Index() {
               S13赛季【史前复仇者】来袭
             </View>
           </View>
-        </View>
+        </View> */}
       </View>
       <View className="mt-[10px]">
         <PostList />
@@ -60,7 +60,7 @@ function Index() {
           navigateTo({ url: "/pages/publish/index" });
         }}
       >
-        <Plus color="#fff" size={20} />
+        <Plus color="#fff" size={50} style={{ marginLeft: "-2px" }} />
       </View>
     </View>
   );

src/pages/login/index.scss

@@ -1,15 +1,15 @@
 .login-page {
   .login-contain {
     width: 90%;
-    margin: 40rpx auto 0 auto;
+    margin: 20px auto 0 auto;
 
     .input-box {
       --nutui-input-background-color: #f5f5f5;
-      --nutui-input-border-radius: 22px;
+      --nutui-input-border-radius: 20px;
       --nutui-input-color: #333;
-      --nutui-input-font-size: 28rpx;
-      height: 75rpx;
-      padding-left: 20px;
+      --nutui-input-font-size: 14px;
+      height: 40px;
+      padding-left: 10px;
     }
   }
 }

src/pages/login/index.tsx

@@ -4,9 +4,11 @@ import { Button, Form, Input } from "@nutui/nutui-react-taro";
 import { verifyPhone } from "../../utils";
 import { sendCodeApi, smsLoginApi } from "../../api/auth";
 import { setStorageSync, redirectTo } from "@tarojs/taro";
+import { useState } from "react";
 
 const LoginIndex = () => {
   const [form] = Form.useForm();
+  const [showCode, setShowCode] = useState(false);
   const mobile = Form.useWatch("mobile", form);
   const code = Form.useWatch("code", form);
   /**
@@ -14,6 +16,7 @@ const LoginIndex = () => {
    */
   const sendCode = async () => {
     console.log(mobile);
+    setShowCode(true);
     await sendCodeApi({ mobile }).then((res) => {
       console.log(res);
     });
@@ -36,15 +39,20 @@ const LoginIndex = () => {
       <View className="login-contain">
         <View className="text-[16px] font-bold text-center">手机号登录</View>
         <Form form={form}>
-          <Form.Item name="mobile">
-            <Input placeholder="手机号码" className="input-box" />
-          </Form.Item>
-          <View className="flex flex-wrap items-center flex-row bg-[#ffffff] relative">
+          {!showCode && (
+            <Form.Item name="mobile">
+              <Input placeholder="手机号码" className="input-box" />
+            </Form.Item>
+          )}
+
+          {/* <View className="flex flex-wrap justify-between items-center bg-[#ffffff] relative w-full"> */}
+          {showCode && (
             <Form.Item name="code">
               <Input placeholder="请输入短信验证码" className="input-box" />
             </Form.Item>
+          )}
 
-            <Button
+          {/* <Button
               type="primary"
               disabled={!verifyPhone(mobile)}
               size="small"
@@ -52,19 +60,32 @@ const LoginIndex = () => {
               onClick={() => sendCode()}
             >
               <Text className="text-[12px] text-[#ffffff]">获取验证码</Text>
-            </Button>
-          </View>
+            </Button> */}
+          {/* </View> */}
         </Form>
         <View className="mt-[22px]">
-          <Button
-            size="large"
-            block
-            type="primary"
-            disabled={!verifyPhone(mobile) || !code}
-            onClick={() => smsLogin()}
-          >
-            登录
-          </Button>
+          {showCode ? (
+            <Button
+              size="large"
+              block
+              type="primary"
+              disabled={!verifyPhone(mobile) || !code}
+              onClick={() => smsLogin()}
+            >
+              登录
+            </Button>
+          ) : (
+            <Button
+              size="large"
+              block
+              type="primary"
+              disabled={!verifyPhone(mobile)}
+              className="flex-shrink-1 absolute right-0"
+              onClick={() => sendCode()}
+            >
+              下一步
+            </Button>
+          )}
         </View>
       </View>
     </View>

src/pages/message/index.tsx

@@ -1,9 +1,9 @@
-import { Badge, Cell } from "@nutui/nutui-react-taro";
-import { ArrowRight } from "@nutui/icons-react-taro";
+import { Badge, Cell, NavBar } from "@nutui/nutui-react-taro";
+import { ArrowLeft, ArrowRight } from "@nutui/icons-react-taro";
 import { View } from "@tarojs/components";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { getUnreadCountApi } from "../../api/notifications";
-import { navigateTo, useDidShow } from "@tarojs/taro";
+import { navigateTo, useDidShow, navigateBack } from "@tarojs/taro";
 
 const Message = () => {
   const [unreadCount, setUnreadCount] = useState({
@@ -28,6 +28,20 @@ const Message = () => {
   });
   return (
     <>
+      <NavBar
+        back={
+          <>
+            <ArrowLeft />
+            返回
+          </>
+        }
+        onBackClick={(e) => {
+          e.preventDefault();
+          navigateBack({ delta: 1 });
+        }}
+      >
+        消息
+      </NavBar>
       <Cell
         onClick={() => {
           navigateTo({

src/pages/message/list/index.tsx

@@ -1,8 +1,13 @@
 import { Text, View, ScrollView } from "@tarojs/components";
-import { useLoad, setNavigationBarTitle, navigateTo } from "@tarojs/taro";
+import {
+  useLoad,
+  setNavigationBarTitle,
+  navigateTo,
+  navigateBack,
+} from "@tarojs/taro";
 import { timeFormat } from "../../../utils";
-import { Image } from "@nutui/nutui-react-taro";
-import { Message } from "@nutui/icons-react-taro";
+import { Image, NavBar } from "@nutui/nutui-react-taro";
+import { ArrowLeft, Message } from "@nutui/icons-react-taro";
 import { useEffect, useState } from "react";
 import CommentInput from "../../../components/comment-list/comment-input";
 import {
@@ -15,6 +20,7 @@ const MessageList = () => {
   const [CommentPostId, setCommentPostId] = useState(0);
   const [CommentParentCommentId, setCommentParentCommentId] = useState(0);
   const [typeId, setTypeId] = useState("0");
+  const [title, setTitle] = useState("");
 
   // 分页相关状态
   const [currentPage, setCurrentPage] = useState(1);
@@ -26,6 +32,7 @@ const MessageList = () => {
       case "like":
         setTypeId("4,5");
         handleReadNotification("4,5");
+        setTitle("收到的点赞");
         setNavigationBarTitle({
           title: "收到的点赞",
         });
@@ -33,6 +40,7 @@ const MessageList = () => {
       case "comment":
         setTypeId("1,2,3");
         handleReadNotification("1,2,3");
+        setTitle("评论和@");
         setNavigationBarTitle({
           title: "评论和@",
         });
@@ -40,6 +48,7 @@ const MessageList = () => {
       case "follow":
         setTypeId("6,7");
         handleReadNotification("6,7");
+        setTitle("关注和分享");
         setNavigationBarTitle({
           title: "关注和分享",
         });
@@ -119,154 +128,174 @@ const MessageList = () => {
     getNotificationList(1, true);
   }, [typeId]);
   return (
-    <ScrollView
-      className="bg-[#f8f8f8] h-full"
-      scrollY
-      refresherEnabled
-      refresherTriggered={refreshing}
-      onRefresherRefresh={onRefresh}
-      onScrollToLower={loadMore}
-      lowerThreshold={50}
-      enhanced
-      showScrollbar={false}
-    >
-      {notificationList.map((item, index) => {
-        return (
-          <View
-            key={item.id || index}
-            className="p-[10px] text-[14px] flex mb-[2px] bg-[#fff]"
-          >
-            <View className="w-[50px] h-[50px] bg-[#000] rounded-[50%] overflow-hidden">
-              <Image
-                width={50}
-                height={50}
-                src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg"
-                mode="aspectFill"
-              />
-            </View>
-            <View className="flex-1 ml-[10px]">
-              <View className="text-[14px] font-[800] mb-[3px]">
-                {item.nickname || item.username}
-              </View>
-              <View className="text-[12px] text-[#949494] mb-[3px]">
-                {timeFormat(item.created_at)}
-              </View>
-              <View className="text-[14px] text-[#3d3d3d]">
-                {item.type_id === 4 ? "点赞了你的动态" : ""}
-                {item.type_id === 5 ? "点赞了你的评论" : ""}
-                {item.type_id === 2 ? "评论了你的动态" : ""}
-                {item.type_id === 3 ? item.reply_comment_info.content : ""}
-                {item.type_id === 1
-                  ? `${
-                      item.source_type === "post" ? "在动态中" : "在评论中"
-                    }刚刚@了你 `
-                  : ""}
-                {item.type_id === 6 ? "关注了你" : ""}
-                {item.type_id === 7 ? "分享了你的动态" : ""}
-              </View>
-
+    <>
+      <NavBar
+        back={
+          <>
+            <ArrowLeft />
+            返回
+          </>
+        }
+        onBackClick={(e) => {
+          e.preventDefault();
+          navigateBack({ delta: 1 });
+        }}
+      >
+        {title}
+      </NavBar>
+      <ScrollView
+        className="bg-[#f8f8f8] h-full"
+        scrollY
+        refresherEnabled
+        refresherTriggered={refreshing}
+        onRefresherRefresh={onRefresh}
+        onScrollToLower={loadMore}
+        lowerThreshold={50}
+        enhanced
+        showScrollbar={false}
+      >
+        {notificationList.map((item, index) => {
+          return (
+            <>
               <View
-                className="text-[#858585] text-[14px] pl-[5px] mt-[10px]"
-                style={{ borderLeft: "4rpx solid #e2e2e2" }}
+                key={item.id || index}
+                className="p-[10px] text-[14px] flex mb-[2px] bg-[#fff]"
               >
-                {item.source_type === "comment" ? item.sourse_info.content : ""}
-                {item.source_type === "post" && item.type_id === 2
-                  ? item.reply_comment_info.content
-                  : ""}
-              </View>
-              {/* 回复/评论 */}
-              {item.type_id === 2 ||
-              item.type_id === 3 ||
-              (item.type_id === 1 && item.source_type === "comment") ? (
-                <View
-                  className="flex mt-[10px]"
-                  onClick={() => {
-                    setShowCommentInput(true);
-                    setCommentPostId(item.source_post_info.id);
-                    setCommentParentCommentId(item.reply_comment_info.id);
-                  }}
-                >
-                  <View className="pt-[5px] pb-[5px] pl-[10px] pr-[10px] bg-[#f8f8f8] flex items-center rounded-[20px]">
-                    <Message size={16} color="#949494" />
-                    <Text className="text-[12px] ml-[5px]">回复</Text>
+                <View className="w-[50px] h-[50px] bg-[#000] rounded-[50%] overflow-hidden">
+                  <Image
+                    width={50}
+                    height={50}
+                    src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg"
+                    mode="aspectFill"
+                  />
+                </View>
+                <View className="flex-1 ml-[10px]">
+                  <View className="text-[14px] font-[800] mb-[3px]">
+                    {item.nickname || item.username}
+                  </View>
+                  <View className="text-[12px] text-[#949494] mb-[3px]">
+                    {timeFormat(item.created_at)}
+                  </View>
+                  <View className="text-[14px] text-[#3d3d3d]">
+                    {item.type_id === 4 ? "点赞了你的动态" : ""}
+                    {item.type_id === 5 ? "点赞了你的评论" : ""}
+                    {item.type_id === 2 ? "评论了你的动态" : ""}
+                    {item.type_id === 3 ? item.reply_comment_info.content : ""}
+                    {item.type_id === 1
+                      ? `${
+                          item.source_type === "post" ? "在动态中" : "在评论中"
+                        }刚刚@了你 `
+                      : ""}
+                    {item.type_id === 6 ? "关注了你" : ""}
+                    {item.type_id === 7 ? "分享了你的动态" : ""}
                   </View>
+
+                  <View
+                    className="text-[#858585] text-[14px] pl-[5px] mt-[10px]"
+                    style={{ borderLeft: "4rpx solid #e2e2e2" }}
+                  >
+                    {item.source_type === "comment"
+                      ? item.sourse_info.content
+                      : ""}
+                    {item.source_type === "post" && item.type_id === 2
+                      ? item.reply_comment_info.content
+                      : ""}
+                  </View>
+                  {/* 回复/评论 */}
+                  {item.type_id === 2 ||
+                  item.type_id === 3 ||
+                  (item.type_id === 1 && item.source_type === "comment") ? (
+                    <View
+                      className="flex mt-[10px]"
+                      onClick={() => {
+                        setShowCommentInput(true);
+                        setCommentPostId(item.source_post_info.id);
+                        setCommentParentCommentId(item.reply_comment_info.id);
+                      }}
+                    >
+                      <View className="pt-[5px] pb-[5px] pl-[10px] pr-[10px] bg-[#f8f8f8] flex items-center rounded-[20px]">
+                        <Message size={16} color="#949494" />
+                        <Text className="text-[12px] ml-[5px]">回复</Text>
+                      </View>
+                    </View>
+                  ) : (
+                    <></>
+                  )}
                 </View>
-              ) : (
-                <></>
-              )}
-            </View>
-            {item.source_post_info ? (
-              <View
-                className="text-[12px] text-[#333]"
-                onClick={() => {
-                  navigateTo({
-                    url: `/pages/detail/index?id=${item.source_post_info.id}`,
-                  });
-                }}
-              >
-                <Image
-                  width={50}
-                  height={50}
-                  src={
-                    item.source_post_info.media_url
-                      ? item.source_post_info.media_url.split(",")[0]
-                      : ""
-                  }
-                  mode="aspectFill"
-                />
+                {item.source_post_info ? (
+                  <View
+                    className="text-[12px] text-[#333]"
+                    onClick={() => {
+                      navigateTo({
+                        url: `/pages/detail/index?id=${item.source_post_info.id}`,
+                      });
+                    }}
+                  >
+                    <Image
+                      width={50}
+                      height={50}
+                      src={
+                        item.source_post_info.media_url
+                          ? item.source_post_info.media_url.split(",")[0]
+                          : ""
+                      }
+                      mode="aspectFill"
+                    />
+                  </View>
+                ) : (
+                  <></>
+                )}
               </View>
-            ) : (
-              <></>
-            )}
-          </View>
-        );
-      })}
+            </>
+          );
+        })}
 
-      {/* 加载更多按钮 - 用于测试 */}
-      {hasMore && !loading && (
-        <View className="flex justify-center items-center py-[20px]">
-          <View
-            className="px-[20px] py-[10px] bg-[#007aff] rounded-[20px]"
-            onClick={loadMore}
-          >
-            <Text className="text-[14px] text-white">加载更多</Text>
+        {/* 加载更多按钮 - 用于测试 */}
+        {hasMore && !loading && (
+          <View className="flex justify-center items-center py-[20px]">
+            <View
+              className="px-[20px] py-[10px] bg-[#007aff] rounded-[20px]"
+              onClick={loadMore}
+            >
+              <Text className="text-[14px] text-white">加载更多</Text>
+            </View>
           </View>
-        </View>
-      )}
+        )}
 
-      {/* 加载指示器 */}
-      {loading && (
-        <View className="flex justify-center items-center py-[20px]">
-          <Text className="text-[14px] text-[#999]">加载中...</Text>
-        </View>
-      )}
+        {/* 加载指示器 */}
+        {loading && (
+          <View className="flex justify-center items-center py-[20px]">
+            <Text className="text-[14px] text-[#999]">加载中...</Text>
+          </View>
+        )}
 
-      {/* 无更多数据提示 */}
-      {!hasMore && notificationList.length > 0 && (
-        <View className="flex justify-center items-center py-[20px]">
-          <Text className="text-[14px] text-[#999]">没有更多数据了</Text>
-        </View>
-      )}
+        {/* 无更多数据提示 */}
+        {!hasMore && notificationList.length > 0 && (
+          <View className="flex justify-center items-center py-[20px]">
+            <Text className="text-[14px] text-[#999]">没有更多数据了</Text>
+          </View>
+        )}
 
-      {/* 空状态 */}
-      {!loading && notificationList.length === 0 && (
-        <View className="flex justify-center items-center py-[100px]">
-          <Text className="text-[14px] text-[#999]">暂无消息</Text>
-        </View>
-      )}
+        {/* 空状态 */}
+        {!loading && notificationList.length === 0 && (
+          <View className="flex justify-center items-center py-[100px]">
+            <Text className="text-[14px] text-[#999]">暂无消息</Text>
+          </View>
+        )}
 
-      {showCommentInput ? (
-        <CommentInput
-          postId={CommentPostId}
-          parentCommentId={CommentParentCommentId}
-          onClose={() => setShowCommentInput(false)}
-          onOK={() => {
-            setShowCommentInput(false);
-            getNotificationList();
-          }}
-        />
-      ) : null}
-    </ScrollView>
+        {showCommentInput ? (
+          <CommentInput
+            postId={CommentPostId}
+            parentCommentId={CommentParentCommentId}
+            onClose={() => setShowCommentInput(false)}
+            onOK={() => {
+              setShowCommentInput(false);
+              getNotificationList();
+            }}
+          />
+        ) : null}
+      </ScrollView>
+    </>
   );
 };
 

src/pages/publish/index.tsx

@@ -1,8 +1,15 @@
-import { Button, Form, TextArea, Uploader } from "@nutui/nutui-react-taro";
+import {
+  Button,
+  Form,
+  NavBar,
+  TextArea,
+  Uploader,
+} from "@nutui/nutui-react-taro";
 import { View } from "@tarojs/components";
 import Taro, { showToast, navigateBack } from "@tarojs/taro";
 import { useState } from "react";
 import { createPostApi } from "../../api/post";
+import { ArrowLeft } from "@nutui/icons-react-taro";
 
 const Publish = () => {
   const [uploadedFiles, setUploadedFiles] = useState<any[]>([]);
@@ -74,34 +81,50 @@ const Publish = () => {
   };
 
   return (
-    <View className="p-[10px] bg-[#f7f8fa] min-h-screen">
-      <Form form={form} onFinish={(data) => handleSubmit(data)}>
-        <Form.Item name="content">
-          <TextArea placeholder="这一刻的想法..." rows={10} />
-        </Form.Item>
+    <>
+      <NavBar
+        back={
+          <>
+            <ArrowLeft />
+            返回
+          </>
+        }
+        onBackClick={(e) => {
+          e.preventDefault();
+          navigateBack({ delta: 1 });
+        }}
+      >
+        发布
+      </NavBar>
+      <View className="p-[10px] pt-[0] bg-[#f7f8fa] min-h-screen">
+        <Form form={form} onFinish={(data) => handleSubmit(data)}>
+          <Form.Item name="content">
+            <TextArea placeholder="这一刻的想法..." rows={10} />
+          </Form.Item>
 
-        <Form.Item name="urls">
-          {/* 调试信息 */}
-          <Uploader
-            uploadLabel="添加图片"
-            multiple
-            maxCount={9}
-            autoUpload
-            accept="image/*"
-            url={`http://127.0.0.1:8181/files/upload`}
-            headers={{
-              Authorization: getAuthToken(),
-            }}
-            onSuccess={handleUploadSuccess}
-          />
-        </Form.Item>
-        <Form.Item>
-          <Button block type="primary" onClick={() => form.submit()}>
-            发布
-          </Button>
-        </Form.Item>
-      </Form>
-    </View>
+          <Form.Item name="urls">
+            {/* 调试信息 */}
+            <Uploader
+              uploadLabel="添加图片"
+              multiple
+              maxCount={9}
+              autoUpload
+              accept="image/*"
+              url={`/api/files/upload`}
+              headers={{
+                Authorization: getAuthToken(),
+              }}
+              onSuccess={handleUploadSuccess}
+            />
+          </Form.Item>
+          <Form.Item>
+            <Button block type="primary" onClick={() => form.submit()}>
+              发布
+            </Button>
+          </Form.Item>
+        </Form>
+      </View>
+    </>
   );
 };
 

src/pages/report/index.scss

@@ -1,11 +1,11 @@
 .report {
   .radio-item {
-    --nutui-radio-label-font-size: 30rpx;
+    --nutui-radio-label-font-size: 16px;
   }
   .textarea-item {
     --nutui-textarea-padding: 0px;
     background-color: #f3f3f3;
-    padding: 10rpx;
-    border-radius: 10rpx;
+    padding: 5px;
+    border-radius: 5px;
   }
 }

src/pages/report/index.tsx

@@ -1,8 +1,12 @@
 import { Text, View } from "@tarojs/components";
-import { useEventChannel } from "../../hooks/useEventChannel";
 
-import { reportApi } from "../../api/post";
-import { showToast, navigateBack } from "@tarojs/taro";
+import { postDetailApi, reportApi } from "../../api/post";
+import {
+  showToast,
+  navigateBack,
+  useDidShow,
+  getCurrentInstance,
+} from "@tarojs/taro";
 import { useState } from "react";
 import "./index.scss";
 import {
@@ -14,18 +18,32 @@ import {
   Radio,
   Row,
   TextArea,
+  NavBar,
 } from "@nutui/nutui-react-taro";
+import { ArrowLeft } from "@nutui/icons-react-taro";
 
 const Report = () => {
   const [form] = Form.useForm();
   const reportType = Form.useWatch("report_type", form);
   const [postData, setPostData] = useState<any>(null);
-  useEventChannel((eventChannel) => {
-    // 接收初始化数据
-    eventChannel.on("init", (data) => {
-      setPostData(data);
-    });
+
+  useDidShow(() => {
+    const { target_type, target_id } =
+      getCurrentInstance()?.router?.params || {};
+    if (target_type === "post") {
+      getPostDetail(Number(target_id));
+    }
   });
+
+  // 获取帖子详情
+  const getPostDetail = (target_id: number) => {
+    postDetailApi({ id: target_id }).then((res: any) => {
+      if (res.code === 200) {
+        setPostData(res.data);
+      }
+    });
+  };
+
   // 提交
   const submit = () => {
     const params = form.getFieldsValue(true);
@@ -47,121 +65,137 @@ const Report = () => {
     });
   };
   return (
-    <View className="p-[10px] report">
-      {postData ? (
-        <>
-          <View className="text-[14px] text-[#333]">
-            举报{" "}
-            <Text className="text-[#595cab]">
-              {" "}
-              @{postData.user.nickname || postData.user.username}
-            </Text>{" "}
-            的动态
-          </View>
-          <View className="p-[10px] mt-[15px] flex items-start bg-[#f4f4f4] rounded-[10px]">
-            <Image
-              height="70"
-              width="70"
-              className="mr-[10px] rounded-[20px] bg-[#595cab]"
-              src={postData.media_url[0].src}
-            ></Image>
-            <View className="text-[14px] text-[#807b83]">
+    <>
+      <NavBar
+        back={
+          <>
+            <ArrowLeft />
+            返回
+          </>
+        }
+        onBackClick={(e) => {
+          e.preventDefault();
+          navigateBack({ delta: 1 });
+        }}
+      >
+        举报
+      </NavBar>
+      <View className="p-[10px] report">
+        {postData ? (
+          <>
+            <View className="text-[14px] text-[#333]">
+              举报{" "}
               <Text className="text-[#595cab]">
                 {" "}
                 @{postData.user.nickname || postData.user.username}
-              </Text>
-              {"："}
-              {postData.content}
+              </Text>{" "}
+              的动态
             </View>
-          </View>
-          <Form form={form} onFinish={() => submit()}>
-            <View className="mt-[15px]">
-              <Text className="text-[20px] font-[800] text-[#333]">
-                举报理由
-              </Text>
-              <View className="mt-[10px]">
-                <FormItem name="report_type">
-                  <Radio.Group>
-                    <Row>
-                      <Col span={12} className="nut-grid-square">
-                        <Radio value="1" className="radio-item">
-                          人身攻击
-                        </Radio>
-                      </Col>
-                      <Col span={12} className="nut-grid-square">
-                        <Radio value="2" className="radio-item">
-                          淫秽色情
-                        </Radio>
-                      </Col>
-                      <Col span={12} className="nut-grid-square">
-                        <Radio value="3" className="radio-item">
-                          违法信息
-                        </Radio>
-                      </Col>
-                      <Col span={12} className="nut-grid-square">
-                        <Radio value="4" className="radio-item">
-                          有害信息
-                        </Radio>
-                      </Col>
-                      <Col span={12} className="nut-grid-square">
-                        <Radio value="5" className="radio-item">
-                          垃圾广告
-                        </Radio>
-                      </Col>
-                      <Col span={12} className="nut-grid-square">
-                        <Radio value="6" className="radio-item">
-                          侵权抄袭
-                        </Radio>
-                      </Col>
-                      <Col span={12} className="nut-grid-square">
-                        <Radio value="7" className="radio-item">
-                          诈骗
-                        </Radio>
-                      </Col>
-                      <Col span={12} className="nut-grid-square">
-                        <Radio value="8" className="radio-item">
-                          未成年人相关举报
-                        </Radio>
-                      </Col>
-                      <Col span={12} className="nut-grid-square">
-                        <Radio value="9" className="radio-item">
-                          其他
-                        </Radio>
-                      </Col>
-                    </Row>
-                  </Radio.Group>
-                </FormItem>
+            <View className="p-[10px] mt-[15px] flex items-start bg-[#f4f4f4] rounded-[10px]">
+              <Image
+                height="70"
+                width="70"
+                className="mr-[10px] rounded-[20px] bg-[#595cab]"
+                src={postData.media_url[0].src}
+              ></Image>
+              <View className="text-[14px] text-[#807b83]">
+                <Text className="text-[#595cab]">
+                  {" "}
+                  @{postData.user.nickname || postData.user.username}
+                </Text>
+                {"："}
+                {postData.content}
               </View>
-              {reportType === "9" && (
-                <>
-                  <FormItem name="reason">
-                    <TextArea
-                      placeholder="请输入理由（必填）"
-                      className="textarea-item"
-                      onChange={(value) => console.log("change", value)}
-                      onBlur={() => console.log("blur")}
-                      onFocus={() => console.log("focus")}
-                    />
-                  </FormItem>
-                </>
-              )}
             </View>
-            <FormItem>
-              <Button
-                block
-                type="primary"
-                disabled={!reportType}
-                onClick={() => form.submit()}
-              >
-                提交
-              </Button>
-            </FormItem>
-          </Form>
-        </>
-      ) : (
-        <></>
-      )}
-    </View>
+            <Form form={form} onFinish={() => submit()}>
+              <View className="mt-[15px]">
+                <Text className="text-[20px] font-[800] text-[#333]">
+                  举报理由
+                </Text>
+                <View className="mt-[10px]">
+                  <FormItem name="report_type">
+                    <Radio.Group>
+                      <Row>
+                        <Col span={12} className="nut-grid-square">
+                          <Radio value="1" className="radio-item">
+                            人身攻击
+                          </Radio>
+                        </Col>
+                        <Col span={12} className="nut-grid-square">
+                          <Radio value="2" className="radio-item">
+                            淫秽色情
+                          </Radio>
+                        </Col>
+                        <Col span={12} className="nut-grid-square">
+                          <Radio value="3" className="radio-item">
+                            违法信息
+                          </Radio>
+                        </Col>
+                        <Col span={12} className="nut-grid-square">
+                          <Radio value="4" className="radio-item">
+                            有害信息
+                          </Radio>
+                        </Col>
+                        <Col span={12} className="nut-grid-square">
+                          <Radio value="5" className="radio-item">
+                            垃圾广告
+                          </Radio>
+                        </Col>
+                        <Col span={12} className="nut-grid-square">
+                          <Radio value="6" className="radio-item">
+                            侵权抄袭
+                          </Radio>
+                        </Col>
+                        <Col span={12} className="nut-grid-square">
+                          <Radio value="7" className="radio-item">
+                            诈骗
+                          </Radio>
+                        </Col>
+                        <Col span={12} className="nut-grid-square">
+                          <Radio value="8" className="radio-item">
+                            未成年人相关举报
+                          </Radio>
+                        </Col>
+                        <Col span={12} className="nut-grid-square">
+                          <Radio value="9" className="radio-item">
+                            其他
+                          </Radio>
+                        </Col>
+                      </Row>
+                    </Radio.Group>
+                  </FormItem>
+                </View>
+                {reportType === "9" && (
+                  <>
+                    <FormItem name="reason">
+                      <TextArea
+                        placeholder="请输入理由（必填）"
+                        className="textarea-item"
+                        onChange={(value) => console.log("change", value)}
+                        onBlur={() => console.log("blur")}
+                        onFocus={() => console.log("focus")}
+                      />
+                    </FormItem>
+                  </>
+                )}
+              </View>
+              <FormItem>
+                <Button
+                  block
+                  type="primary"
+                  disabled={!reportType}
+                  onClick={() => form.submit()}
+                >
+                  提交
+                </Button>
+              </FormItem>
+            </Form>
+          </>
+        ) : (
+          <></>
+        )}
+      </View>
+    </>
   );
 };
 

src/pages/self/index.tsx

@@ -1,5 +1,6 @@
 import { ScrollView, Text, View } from "@tarojs/components";
 import {
+  ArrowLeft,
   Heart,
   HeartFill,
   Message,
@@ -12,9 +13,15 @@ import {
   GridItem,
   Image,
   ImagePreview,
+  NavBar,
   Tabs,
 } from "@nutui/nutui-react-taro";
-import { navigateTo, getSystemInfoSync, useDidShow } from "@tarojs/taro";
+import {
+  navigateTo,
+  getSystemInfoSync,
+  useDidShow,
+  navigateBack,
+} from "@tarojs/taro";
 import "./index.scss";
 import { useState, useEffect, useCallback } from "react";
 import { strSlice } from "../../utils";
@@ -152,219 +159,246 @@ const Self = () => {
     getPostList(true, false);
   }, []);
   return (
-    <View className="min-h-screen bg-[#f7f8fa]">
-      <View className="p-[10px] bg-[#fff]">
-        <View className="flex items-center justify-between">
-          <View className="flex items-center">
-            <View className="w-[50px] h-[50px] bg-[#1874d0] rounded-[50%] overflow-hidden">
-              {userInfo.avatar_url ? (
-                <Image src={userInfo.avatar_url} mode="aspectFill" />
-              ) : (
-                <Image src={userInfo.avatar_url} mode="aspectFill" />
-              )}
-            </View>
-            <View className="flex-1 ml-[10px]">
-              <View className="text-[16px] font-bold">
-                {userInfo.nickname || userInfo.username}
+    <>
+      <NavBar
+        back={
+          <>
+            <ArrowLeft />
+            返回
+          </>
+        }
+        onBackClick={(e) => {
+          e.preventDefault();
+          navigateBack({ delta: 1 });
+        }}
+      >
+        消息
+      </NavBar>
+
+      <View className="min-h-screen bg-[#f7f8fa]">
+        <View className="p-[10px] pt-[0px] bg-[#fff]">
+          <View className="flex items-center justify-between">
+            <View className="flex items-center">
+              <View className="w-[50px] h-[50px] bg-[#1874d0] rounded-[50%] overflow-hidden">
+                <Image
+                  src={userInfo.avatar_url}
+                  width="100%"
+                  height="100%"
+                  mode="aspectFill"
+                />
+              </View>
+              <View className="flex-1 ml-[10px]">
+                <View className="text-[16px] font-bold">
+                  {userInfo.nickname || userInfo.username}
+                </View>
               </View>
             </View>
+            <Badge top="2" right="8" value={userInfo.notification_count}>
+              <Notice
+                onClick={() => {
+                  navigateTo({ url: "/pages/message/index" });
+                }}
+              />
+            </Badge>
           </View>
-          <Badge top="2" right="8" value={userInfo.notification_count}>
-            <Notice
-              onClick={() => {
-                navigateTo({ url: "/pages/message/index" });
-              }}
-            />
-          </Badge>
-        </View>
-        <View className="flex items-center justify-between text-[14px] mt-[10px]">
-          <View className="flex">
+          <View className="flex items-center justify-between text-[14px] mt-[10px]">
             <View className="flex">
-              <Text className="text-[#949494]">关注我</Text>
-              <Text className="ml-[5px]">{userInfo.follow_count}</Text>
+              <View className="flex">
+                <Text className="text-[#949494]">关注我</Text>
+                <Text className="ml-[5px]">{userInfo.follow_count}</Text>
+              </View>
+              <View className="flex ml-[20px]">
+                <Text className="text-[#949494]">获得互动</Text>
+                <Text className="ml-[5px]">{userInfo.interaction_count}</Text>
+              </View>
             </View>
-            <View className="flex ml-[20px]">
-              <Text className="text-[#949494]">获得互动</Text>
-              <Text className="ml-[5px]">{userInfo.interaction_count}</Text>
+            <View
+              className="bg-[#f7f7f7] w-[70px] h-[30px] rounded-[15px] flex items-center justify-around"
+              onClick={() => {
+                navigateTo({ url: "/pages/publish/index" });
+              }}
+            >
+              <View className="flex items-center">
+                <Plus />
+                <Text>发布</Text>
+              </View>
             </View>
           </View>
-          <View
-            className="bg-[#f7f7f7] w-[70px] h-[30px] rounded-[15px] flex items-center justify-around"
-            onClick={() => {
-              navigateTo({ url: "/pages/publish/index" });
+        </View>
+        <View className="mt-[10px]">
+          <Tabs
+            className="tabs-self"
+            align="left"
+            value={tab1value}
+            onChange={(value) => {
+              setTab1value(value);
             }}
           >
-            <View className="flex items-center">
-              <Plus />
-              <Text>发布</Text>
-            </View>
-          </View>
-        </View>
-      </View>
-      <View className="mt-[10px]">
-        <Tabs
-          className="tabs-self"
-          align="left"
-          value={tab1value}
-          onChange={(value) => {
-            setTab1value(value);
-          }}
-        >
-          <Tabs.TabPane title="帖子">
-            <ScrollView
-              scrollY
-              style={{ height: `${scrollHeight}px` }}
-              onScrollToLower={loadMore}
-              refresherEnabled
-              refresherTriggered={refreshing}
-              onRefresherRefresh={onRefresh}
-              lowerThreshold={50}
-              className="bg-[#f7f8fa]"
-            >
-              {postList.map((item) => (
-                <View
-                  className="post-list-item bg-[#fff] p-[10px] mt-[10px]"
-                  onClick={() =>
-                    navigateTo({ url: `/pages/detail/index?id=${item.id}` })
-                  }
-                >
-                  <View className="flex items-center justify-between">
-                    <View className="flex items-center">
-                      <View className="w-[80rpx] h-[80rpx] rounded-[50%] bg-[#000] overflow-hidden bg-[url('https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png')] bg-cover bg-center"></View>
-                      <View className="ml-[10rpx]">
-                        <View className="text-[14px] font-[800] text-[#9c9dee]">
-                          {item.user.nickname || "微信用户"}
-                        </View>
-                        {item.user.is_official ? (
-                          <View className="text-[12px] text-[#949494]">
-                            《心动女友》官方账号
+            <Tabs.TabPane title="帖子">
+              <ScrollView
+                scrollY
+                style={{ height: `${scrollHeight}px` }}
+                onScrollToLower={loadMore}
+                refresherEnabled
+                refresherTriggered={refreshing}
+                onRefresherRefresh={onRefresh}
+                lowerThreshold={50}
+                className="bg-[#f7f8fa]"
+              >
+                {postList.map((item) => (
+                  <View
+                    className="post-list-item bg-[#fff] p-[10px] mt-[10px]"
+                    onClick={() =>
+                      navigateTo({ url: `/pages/detail/index?id=${item.id}` })
+                    }
+                  >
+                    <View className="flex items-center justify-between">
+                      <View className="flex items-center">
+                        <View
+                          className="w-[40px] h-[40px] rounded-[50%] bg-[#000] overflow-hidden  bg-cover bg-center"
+                          style={{
+                            backgroundImage: item.user.avatar_url
+                              ? `url('${item.user.avatar_url}')`
+                              : "none",
+                          }}
+                        ></View>
+                        <View className="ml-[10rpx]">
+                          <View className="text-[14px] font-[800] text-[#9c9dee]">
+                            {item.user.nickname || "微信用户"}
                           </View>
+                          {item.user.is_official ? (
+                            <View className="text-[12px] text-[#949494]">
+                              《心动女友》官方账号
+                            </View>
+                          ) : (
+                            <></>
+                          )}
+                        </View>
+                      </View>
+                    </View>
+                    <View className="text-[14px] text-[#333] pt-[10px]">
+                      {strSlice(item.content, 100)}
+                      {item.content.length > 100 && (
+                        <Text className="text-[#1874d0]">全文</Text>
+                      )}
+                    </View>
+                    <View className="mt-[10px]">
+                      <Grid
+                        columns={item.media_url.length < 3 ? 2 : 3} // 这里，如果图片小于3张，则columns为2，如果图片大于等于3张，则columns为3
+                        gap={7}
+                        style={
+                          {
+                            "--nutui-grid-item-content-padding": "0px",
+                            "--nutui-grid-item-content-margin": "0px",
+                          } as any
+                        }
+                      >
+                        {item.media_url.map((ite: any, index: number) => {
+                          return (
+                            <GridItem>
+                              <Image
+                                width="100%"
+                                height="100px"
+                                src={ite.src}
+                                mode="widthFix"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setMediaUrl(item.media_url);
+                                  setInit(index + 1);
+
+                                  setShowPreview(true);
+                                }}
+                              />
+                            </GridItem>
+                          );
+                        })}
+                      </Grid>
+                    </View>
+                    <View className="mt-[10px] pl-[20px] pr-[20px] flex items-center justify-between">
+                      <View className="flex items-center">
+                        <Message size={16} color="#949494" />
+                        <Text className="ml-[5px] text-[16px] text-[#949494]">
+                          {item.comment_count}
+                        </Text>
+                      </View>
+                      <View
+                        className="flex items-center"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleInteraction(
+                            item.id,
+                            item.interaction_type === "praise"
+                              ? "dispraise"
+                              : "praise"
+                          );
+                        }}
+                      >
+                        {item.interaction_type === "praise" ? (
+                          <HeartFill size={16} color="#ec4342" />
                         ) : (
-                          <></>
+                          <Heart size={16} color="#949494" />
                         )}
+                        <Text className="ml-[5px] text-[16px] text-[#949494]">
+                          {item.like_count}
+                        </Text>
                       </View>
                     </View>
                   </View>
-                  <View className="text-[14px] text-[#333] pt-[10px]">
-                    {strSlice(item.content, 100)}
-                    {item.content.length > 100 && (
-                      <Text className="text-[#1874d0]">全文</Text>
-                    )}
-                  </View>
-                  <View className="mt-[10px]">
-                    <Grid
-                      columns={item.media_url.length < 3 ? 2 : 3} // 这里，如果图片小于3张，则columns为2，如果图片大于等于3张，则columns为3
-                      gap={7}
-                      style={
-                        {
-                          "--nutui-grid-item-content-padding": "0px",
-                          "--nutui-grid-item-content-margin": "0px",
-                        } as any
-                      }
-                    >
-                      {item.media_url.map((ite: any, index: number) => {
-                        return (
-                          <GridItem>
-                            <Image
-                              src={ite.src}
-                              mode="aspectFill"
-                              height="100"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                setMediaUrl(item.media_url);
-                                setInit(index + 1);
+                ))}
 
-                                setShowPreview(true);
-                              }}
-                            />
-                          </GridItem>
-                        );
-                      })}
-                    </Grid>
-                  </View>
-                  <View className="mt-[10px] pl-[20px] pr-[20px] flex items-center justify-between">
-                    <View className="flex items-center">
-                      <Message size={16} color="#949494" />
-                      <Text className="ml-[5px] text-[16px] text-[#949494]">
-                        {item.comment_count}
-                      </Text>
-                    </View>
+                {/* 错误状态 */}
+                {error && (
+                  <View className="p-[20px] text-center">
+                    <View className="text-[#ff4d4f] mb-[10px]">{error}</View>
                     <View
-                      className="flex items-center"
-                      onClick={() => {
-                        handleInteraction(
-                          item.id,
-                          item.interaction_type === "praise"
-                            ? "dispraise"
-                            : "praise"
-                        );
-                      }}
+                      className="text-[#1874d0] underline cursor-pointer"
+                      onClick={() => getPostList()}
                     >
-                      {item.interaction_type === "praise" ? (
-                        <HeartFill size={16} color="#ec4342" />
-                      ) : (
-                        <Heart size={16} color="#949494" />
-                      )}
-                      <Text className="ml-[5px] text-[16px] text-[#949494]">
-                        {item.like_count}
-                      </Text>
+                      点击重试
                     </View>
                   </View>
-                </View>
-              ))}
+                )}
 
-              {/* 错误状态 */}
-              {error && (
-                <View className="p-[20px] text-center">
-                  <View className="text-[#ff4d4f] mb-[10px]">{error}</View>
-                  <View
-                    className="text-[#1874d0] underline cursor-pointer"
-                    onClick={() => getPostList()}
-                  >
-                    点击重试
+                {/* 加载更多状态 */}
+                {loadingMore && (
+                  <View className="p-[20px] text-center text-[#999]">
+                    加载更多...
                   </View>
-                </View>
-              )}
+                )}
 
-              {/* 加载更多状态 */}
-              {loadingMore && (
-                <View className="p-[20px] text-center text-[#999]">
-                  加载更多...
-                </View>
-              )}
-
-              {/* 没有更多数据 */}
-              {!hasMore && postList.length > 0 && !loading && !refreshing && (
-                <View className="p-[20px] text-center text-[#999]">
-                  没有更多内容了
-                </View>
-              )}
+                {/* 没有更多数据 */}
+                {!hasMore && postList.length > 0 && !loading && !refreshing && (
+                  <View className="p-[20px] text-center text-[#999]">
+                    没有更多内容了
+                  </View>
+                )}
 
-              {/* 空状态 */}
-              {!loading && !refreshing && postList.length === 0 && !error && (
-                <View className="p-[40px] text-center text-[#999]">
-                  暂无帖子
-                </View>
-              )}
+                {/* 空状态 */}
+                {!loading && !refreshing && postList.length === 0 && !error && (
+                  <View className="p-[40px] text-center text-[#999]">
+                    暂无帖子
+                  </View>
+                )}
 
-              {/* 初始加载状态 */}
-              {loading && postList.length === 0 && (
-                <View className="p-[40px] text-center text-[#999]">
-                  加载中...
-                </View>
-              )}
-            </ScrollView>
-          </Tabs.TabPane>
-        </Tabs>
+                {/* 初始加载状态 */}
+                {loading && postList.length === 0 && (
+                  <View className="p-[40px] text-center text-[#999]">
+                    加载中...
+                  </View>
+                )}
+              </ScrollView>
+            </Tabs.TabPane>
+          </Tabs>
+        </View>
+        <ImagePreview
+          images={mediaUrl}
+          visible={showPreview}
+          defaultValue={init}
+          onClose={() => setShowPreview(false)}
+          indicator
+        />
       </View>
-      <ImagePreview
-        images={mediaUrl}
-        visible={showPreview}
-        defaultValue={init}
-        onClose={() => setShowPreview(false)}
-        indicator
-      />
-    </View>
+    </>
   );
 };