From 68de96c58688083d32c2e63126a8af6eab7be865 Mon Sep 17 00:00:00 2001
From: qinjiangban <tanjiangban@gmail.com>
Date: Mon, 3 Jun 2024 04:23:16 +0800
Subject: [PATCH] ui

---
 app/(Nav)/(home)/layout.tsx           | 18 ++++--
 app/(Nav)/(home)/music/page.tsx       | 14 ++---
 app/(Nav)/(home)/page.tsx             |  2 +-
 app/(Nav)/find/page.jsx               |  2 +-
 app/(Nav)/layout.tsx                  |  6 +-
 app/(Nav)/message/chat/page.tsx       |  8 +++
 app/(Nav)/message/community/page.tsx  |  7 +++
 app/(Nav)/message/layout.tsx          | 52 ++++++++++++++++++
 app/(Nav)/message/notice/page.tsx     |  8 +++
 app/(Nav)/message/page.jsx            | 12 ----
 app/(Nav)/profile/page.tsx            |  2 +-
 app/globals.css                       |  4 +-
 app/login/LoginForm.tsx               |  2 +-
 app/login/WelcomeToLens.tsx           | 12 ++--
 components/header/LoginButton.tsx     | 79 +++++----------------------
 components/header/header.tsx          | 48 ++++++++--------
 components/nav/NavHeader.tsx          | 74 +++++++++++++++++++++++++
 components/nav/Navbar.tsx             | 28 +++++-----
 components/postslist/InteractCard.tsx | 12 ++--
 components/postslist/PosText.tsx      |  2 +-
 config/Wagmi.tsx                      |  2 +-
 config/Web3Modal.tsx                  |  5 +-
 package-lock.json                     |  4 +-
 package.json                          |  2 +-
 tailwind.config.ts                    | 28 +++++-----
 25 files changed, 269 insertions(+), 164 deletions(-)
 create mode 100644 app/(Nav)/message/chat/page.tsx
 create mode 100644 app/(Nav)/message/community/page.tsx
 create mode 100644 app/(Nav)/message/layout.tsx
 create mode 100644 app/(Nav)/message/notice/page.tsx
 delete mode 100644 app/(Nav)/message/page.jsx
 create mode 100644 components/nav/NavHeader.tsx

diff --git a/app/(Nav)/(home)/layout.tsx b/app/(Nav)/(home)/layout.tsx
index df8aa87..208787c 100644
--- a/app/(Nav)/(home)/layout.tsx
+++ b/app/(Nav)/(home)/layout.tsx
@@ -35,28 +35,34 @@ export default function Home({ children }) {
     }
   ]
   return (
-    <div className="mx-auto lg:max-w-4xl  h-full lg:justify-center pb-12  flex  flex-col ">
+    <div className="mx-auto lg:max-w-4xl  lg:justify-center pb-14  flex  flex-col ">
 
 
-      <div className="flex flex-row  border-l w-[100vw] lg:w-full z-20 h-16 sm:mt-16 items-center ">
+
+      <div className="flex flex-row border-x-0 md:border-x w-[100vw] lg:w-full z-20 h-16 md:mt-16 items-center ">
         {linknav.map((item) => (
           <div className='mx-auto flex-col sm:flex-row  justify-around w-[20%] flex hover:bg-[--link-hover-background]  z-20' key={item.href}>
 
-
-          <Link  href={item.href} className={`z-20 flex items-center justify-center w-[100%] h-16 flex-col sm:flex-row  text-[#878787] border-r border-b ${pathname === item.href ? 'text-primary  border-b border-b-primary' : ''}`}>
-              <div className=' justify-center text-2xl sm:text-xl z-20'> {item.logo} </div>
-              <p className="text-sm ml-2 sm:ml-0 text-inherit z-20 text-center sm:text-justify">{item.name}</p>
+          <Link  href={item.href} className={`z-20 flex items-center justify-center w-[100%] h-16 flex-col sm:flex-row  text-[#878787]  border-b ${pathname === item.href ? 'text-info border-b-2 border-b-info' : ''}`}>
+              <div className=' justify-center text-2xl sm:text-3xl z-20'> {item.logo} </div>
+              <p className="text-sm text-inherit z-20 text-center">{item.name}</p>
           </Link>
+
           </div>
         ))}
       </div>
 
+
+
       <div className=''>
 
         {children}
 
       </div>
 
+
+
+
     </div>
   )
 }
diff --git a/app/(Nav)/(home)/music/page.tsx b/app/(Nav)/(home)/music/page.tsx
index da9c457..7f9d124 100644
--- a/app/(Nav)/(home)/music/page.tsx
+++ b/app/(Nav)/(home)/music/page.tsx
@@ -74,7 +74,7 @@ export default function Page() {
 
   return (
     <>
-      <div className="flex flex-1 flex-wrap flex-col max-w-4xl mx-auto">
+      <div className="flex flex-wrap flex-col justify-normal lg:justify-center lg:w-full w-[100vw]">
 
 
         {loadingMusicPubs && (
@@ -86,7 +86,7 @@ export default function Page() {
 
         {musicPubs?.map(publication => (
           <div
-            className="border-b border-l border-r sm:border-r-0 sm:border-l-0 hover:bg-[#6463631a]"
+            className="md:border  border-b border-t-0 hover:bg-[--link-hover-background] w-dvw  lg:max-w-4xl py-6 lg:px-6 "
             key={publication.id}
             onClick={() => router.push(`https://share.lens.xyz/p/${publication.id}`)}
           >
@@ -105,23 +105,23 @@ export default function Page() {
 
 
               <div>
+                <ReactMarkdown className=" mt-4 break-words ">
+                  {publication.metadata.content.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, '[LINK]($1)')}
+                </ReactMarkdown>
                 <img
-                  className={`max-w-[400px] h-auto sm:max-w-[100%]   sm:h-auto mb-3  sm:rounded-none  rounded-2xl object-cover`}
+                  className={`sm:max-w-[400px] h-auto max-w-[100%]   sm:h-auto mb-3  sm:rounded-none  rounded-2xl object-cover`}
                   alt='audio img'
                   src={publication.__typename === 'Post' ?
                     publication.metadata?.asset?.cover?.optimized?.uri ?
                       publication.metadata?.asset?.cover?.optimized?.uri :
                       publication.metadata?.asset?.cover?.optimized?.raw?.uri : ''}
                 />
-                <audio controls>
+                <audio controls className={`sm:w-[400px] `}>
                   <source
                     type={publication.metadata?.asset?.audio?.optimized?.mimeType}
                     src={publication.metadata?.asset?.audio?.optimized?.uri}
                   />
                 </audio>
-                <ReactMarkdown className=" mt-4 break-words ">
-                  {publication.metadata.content.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, '[LINK]($1)')}
-                </ReactMarkdown>
               </div>
 
 
diff --git a/app/(Nav)/(home)/page.tsx b/app/(Nav)/(home)/page.tsx
index e6e63a5..ef4d1c7 100644
--- a/app/(Nav)/(home)/page.tsx
+++ b/app/(Nav)/(home)/page.tsx
@@ -87,7 +87,7 @@ export default function Page() {
 
 
         {publications?.map((publication: any) => (
-          <div key={publication.id} className="md:border sm:border-t-0 border-b border-t-0 hover:bg-[--link-hover-background] w-dvw  lg:max-w-4xl py-6 lg:px-6" >
+          <div key={publication.id} className="md:border  border-b border-t-0 hover:bg-[--link-hover-background] w-dvw  lg:max-w-4xl py-6 lg:px-6" >
 
             {/* users  */}
             <div className=" flex px-6 lg:px-0">
diff --git a/app/(Nav)/find/page.jsx b/app/(Nav)/find/page.jsx
index 9dc0894..0feed7e 100644
--- a/app/(Nav)/find/page.jsx
+++ b/app/(Nav)/find/page.jsx
@@ -1,7 +1,7 @@
 import Creator from './creator/page'
 export default function Page() {
   return (
-    <div className=' sm:mt-16'>
+    <div className=' md:mt-16'>
     <Creator />
     </div>
   )
diff --git a/app/(Nav)/layout.tsx b/app/(Nav)/layout.tsx
index bae9017..1f30af7 100644
--- a/app/(Nav)/layout.tsx
+++ b/app/(Nav)/layout.tsx
@@ -1,12 +1,14 @@
 
-import Nav from '@/components/nav/Navbar'
+import Navbar from '@/components/nav/Navbar'
+import NavHeader from '@/components/nav/NavHeader'
 
 
 export default function layout({children}) {
    return (
      <>
+     <NavHeader />
      {children}
-     <Nav />
+     <Navbar />
      </>
    )
 }
\ No newline at end of file
diff --git a/app/(Nav)/message/chat/page.tsx b/app/(Nav)/message/chat/page.tsx
new file mode 100644
index 0000000..43870d3
--- /dev/null
+++ b/app/(Nav)/message/chat/page.tsx
@@ -0,0 +1,8 @@
+export default function chatpage() {
+    return (
+        <div>
+
+            聊天
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/(Nav)/message/community/page.tsx b/app/(Nav)/message/community/page.tsx
new file mode 100644
index 0000000..a1ed7ba
--- /dev/null
+++ b/app/(Nav)/message/community/page.tsx
@@ -0,0 +1,7 @@
+export default function communitypage() {
+    return (
+        <div>
+            社区
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/(Nav)/message/layout.tsx b/app/(Nav)/message/layout.tsx
new file mode 100644
index 0000000..194598c
--- /dev/null
+++ b/app/(Nav)/message/layout.tsx
@@ -0,0 +1,52 @@
+'use client'
+import ThemeSwap from "@/components/ThemeSwap";
+import Link from "next/link";
+import { usePathname } from 'next/navigation'
+import { RiChat3Line, RiFileTextLine, RiImageLine, RiMusic2Line, RiNotification3Line, RiQuestionAnswerLine, RiShapesLine, RiTeamLine, RiVideoLine } from 'react-icons/ri'
+export default function Message({ children }) {
+  const pathname = usePathname();
+  return (
+    <div className='mx-auto max-w-4xl justify-center border-x-0 md:border-x'>
+
+
+
+      <div className="flex flex-row  w-full lg:w-full z-20 h-16 md:mt-16 items-center ">
+
+        {linknav.map((item) => (
+          <div className='mx-auto flex-col sm:flex-row w-1/3 justify-around flex hover:bg-[--link-hover-background]  z-20' key={item.href}>
+
+            <Link href={item.href} className={`z-20 flex items-center justify-center w-[100%] h-16 flex-col sm:flex-row  text-[#878787]  border-b ${pathname === item.href ? 'text-info  border-b-2 border-b-info' : ''}`}>
+              <div className=' justify-center text-2xl sm:text-2xl z-20'> {item.logo} </div>
+              <p className="text-sm text-inherit z-20 text-center">{item.name}</p>
+            </Link>
+
+          </div>
+        ))}
+        
+      </div>
+
+
+
+      {children}
+    </div>
+  );
+}
+
+const linknav = [
+  {
+    href: "/message/chat",
+    name: "聊天",
+    logo: <RiQuestionAnswerLine />
+  },
+  {
+    href: "/message/community",
+    name: "社区",
+    logo: <RiTeamLine />
+  },
+  {
+    href: "/message/notice",
+    name: "通知",
+    logo: <RiNotification3Line />
+  },
+
+]
\ No newline at end of file
diff --git a/app/(Nav)/message/notice/page.tsx b/app/(Nav)/message/notice/page.tsx
new file mode 100644
index 0000000..f7aee90
--- /dev/null
+++ b/app/(Nav)/message/notice/page.tsx
@@ -0,0 +1,8 @@
+export default function noticepage() {
+    return (
+        <div>
+
+            通知
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/(Nav)/message/page.jsx b/app/(Nav)/message/page.jsx
deleted file mode 100644
index 312bd6b..0000000
--- a/app/(Nav)/message/page.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import ThemeSwap from "@/components/ThemeSwap";
-
-export default function Message() {
-  return (
-    <div className="mx-auto max-w-4xl  sm:mt-16 justify-center border-x ">
-      <div className="h-dvh">
-      message 集成社区和通知、聊天模块
-      <ThemeSwap />
-      </div>
-    </div>
-  );
-}
diff --git a/app/(Nav)/profile/page.tsx b/app/(Nav)/profile/page.tsx
index 28093af..b1d678c 100644
--- a/app/(Nav)/profile/page.tsx
+++ b/app/(Nav)/profile/page.tsx
@@ -2,7 +2,7 @@
 
 export default function page() {
    return (
-    <div className="mx-auto max-w-4xl  sm:mt-16 justify-center sm:border-x ">
+    <div className="mx-auto max-w-4xl  md:mt-16 justify-center sm:border-x ">
      profile
      </div>
    )
diff --git a/app/globals.css b/app/globals.css
index f570329..cca48b3 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -10,6 +10,7 @@
   /* UI */
   --link-hover-background: rgba(0, 0, 0, 0.03) !important;
   --navlink-color: #545353d3 !important;
+  --navlink-active: #3f1de7, 
 }
 
 [data-theme='dark'] {
@@ -19,8 +20,9 @@
 
   /* UI hover */
   --link-hover-background: hsla(0, 0%, 100%, 0.04) !important;
-
   --navlink-color: #ece1e1d3 !important;
+  --navlink-active: #C0E218, 
+
 }
 
 body {}
diff --git a/app/login/LoginForm.tsx b/app/login/LoginForm.tsx
index fcf216e..f565f99 100644
--- a/app/login/LoginForm.tsx
+++ b/app/login/LoginForm.tsx
@@ -52,7 +52,7 @@ export default function LoginForm({ owner, onSuccess }: { owner: string; onSucce
           {profiles.map((profile, idx) => (
             <label
               key={profile.id}
-              className="w-full items-center p-4 rounded-lg cursor-pointer border transition-colors border-gray-300 hover:border-gray-500 grid grid-cols-[24px_auto]"
+              className=" btn btn-outline"
             >
               <input
                 disabled={isLoginPending}
diff --git a/app/login/WelcomeToLens.tsx b/app/login/WelcomeToLens.tsx
index 27c9b35..26cbc5b 100644
--- a/app/login/WelcomeToLens.tsx
+++ b/app/login/WelcomeToLens.tsx
@@ -3,7 +3,7 @@
 import { SessionType, useSession } from "@lens-protocol/react-web";
 import { useAccount as useWagmiAccount } from "wagmi";
 import { config } from "@/config/Wagmi";
-
+import { useWeb3Modal } from '@web3modal/wagmi/react'
 import ConnectWalletButton from "@/app/login/ConnectWalletButton";
 import { DisconnectWalletButton } from "@/app/login/DisconnectWalletButton";
 import LoginForm from "@/app/login/LoginForm";
@@ -16,14 +16,16 @@ import ThemeSwap from "@/components/ThemeSwap";
 export function WelcomeToLens() {
     const { isConnected, address } = useWagmiAccount({ config });
     const { data } = useSession();
+    const { open, close } = useWeb3Modal()
 
     return (
         <div className=" flex justify-center items-center">
             <div className=" gap-14 w-dvw">
 
                 {!isConnected && (
-                    <div className="flex flex-col justify-center items-center">
-                        <p className="mb-4">连接您的钱包</p>
+                    <div className="flex flex-row justify-center items-center">
+{/*                         <p className="mb-4" onClick={()=>open({ view: 'Networks' })}>连接您的钱包</p> */}
+                        
                         <ConnectWalletButton />
                     </div>
                 )}
@@ -32,7 +34,7 @@ export function WelcomeToLens() {
                     <>
                         <p className="">当前连接的钱包: </p>
                         <div className="mt-2 mb-16 flex-row flex justify-between items-center">
-                            <button className='btn btn-primary'>{truncateEthAddress(address)}</button>
+                            <button className='btn btn-outline' onClick={()=>open({ view: 'Account' })} >{truncateEthAddress(address)}</button>
                             <DisconnectWalletButton />
                         </div>
 
@@ -43,7 +45,7 @@ export function WelcomeToLens() {
                     <>
                         <p className="">当前登入的Lens账号 </p>
                         <div className="mt-2  flex-row flex justify-between items-center">
-                            <button className='btn btn-primary font-semibold' >{data.profile.handle?.fullHandle ?? data.profile.id}
+                            <button className='btn btn-outline btn-primary font-semibold' >{data.profile.handle?.fullHandle ?? data.profile.id}
                             </button>
                             <LogoutButton />
                         </div>
diff --git a/components/header/LoginButton.tsx b/components/header/LoginButton.tsx
index 319483f..5d195b8 100644
--- a/components/header/LoginButton.tsx
+++ b/components/header/LoginButton.tsx
@@ -11,95 +11,46 @@ import { useTheme } from "next-themes";
 
 export function LoginButton() {
     const router = useRouter();
-    const { isConnected, address } = useAccount({ config });
+    const { isConnected, isDisconnected, address } = useAccount({ config });
+
     const { data } = useSession();
     const { theme, setTheme } = useTheme();
 
 
 
-    /*     if (!isConnected) {
-            return (
-                <>
-                    <button className="btn" color="primary" onClick={() => router.push(`/sigup`)}>注册</button>
-                    <button className="btn" color="primary" onClick={() => router.push(`/login`)} >登入</button>
-                </>
-            );
-        }
-    
-    
-        // step 3. show Profile details
-        if (data && data.type === SessionType.WithProfile) {
-    
-            return (
-                <>
-                    <div className="dropdown dropdown-bottom dropdown-end">
-                        <div tabIndex={0} role="button" className="btn btn-circle m-1 "><RiMenu3Fill size={24} /></div>
-    
-    
-                        <ul tabIndex={0} className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52 border">
-    
-    
-                            {!isConnected && <>
-                                <button className="btn" color="primary" onClick={() => router.push(`/sigup`)}>注册</button>
-                                <button className="btn" color="primary" onClick={() => router.push(`/login`)} >登入</button></>}
-    
-                            {data && data.type === SessionType.WithProfile &&
-                                <b>
-                                    <li><Link href={`/wallet`}><RiWallet2Line size={24} />钱包</Link></li>
-                                    <li><Link href={`/settings`}><RiSettingsLine size={24} />设置</Link></li>
-                                    <li></li>
-                                    <li><Link href={`/login`}> <RiLogoutBoxRLine size={24} />注销</Link></li>
-                                </b>
-                            }
-    
-    
-                            <li></li>
-                            <li><a onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
-                                {theme === 'dark' ?
-                                    (<RiSunLine size={24} />)
-                                    : (<RiMoonClearLine size={24} />)}
-                                <span>切换主题</span></a>
-                            </li>
-                            <li><Link href={`/locales`}><RiTranslate size={24} />语言地区</Link></li>
-    
-                            <li></li>
-                            <li><Link href={`/sponsor`}> <RiServiceLine size={24} />赞助合作</Link></li>
-                            <li><Link href={`/fqa`}> <RiQuestionLine size={24} />常见问题</Link></li>
-                            <li><Link href={`/about`}> <RiInformation2Line size={24} />关于应用</Link></li>
-    
-    
-                        </ul>
-                    </div>
-                </>
-            );
-        } */
-
     return (
         <>
             {!isConnected && <>
-                <button className="btn btn-square  btn-ghost" color="primary" onClick={() => router.push(`/sigup`)}>注册</button>
-                <button className="btn btn-square  btn-ghost" color="primary" onClick={() => router.push(`/login`)} >登入</button></>}
+                <button className="btn btn-outline btn-sm md:btn-md text-lg text-base-content md:text-xl mx-1" onClick={() => router.push(`/sigup`)}>注册</button>
+                <button className="btn btn-outline btn-sm md:btn-md text-lg text-base-content md:text-xl mx-1" onClick={() => router.push(`/login`)} >登入</button></>}
+
+            {!data?.authenticated && address && <>
+                <button className="btn btn-outline btn-sm md:btn-md text-lg text-base-content md:text-xl mx-1" onClick={() => router.push(`/login`)} >未签名</button></>}
 
+            {data && data.type === SessionType.WithProfile && <>
+                <button
+                    className="btn btn-outline btn-sm md:btn-md text-lg text-base-content md:text-xl mx-1">
+                    {data.profile.handle?.fullHandle ?? data.profile.id}
+                </button>
+            </>}
 
             <div className="dropdown dropdown-bottom dropdown-end">
-                <div tabIndex={0} role="button" className="btn btn-square  btn-ghost"><RiMenu3Fill size={24} /></div>
+                <div tabIndex={0} role="button" className="btn btn-square  btn-ghost mx-1"><RiMenu3Fill size={24} /></div>
 
 
                 <ul tabIndex={0} className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52 border">
 
 
-
-
                     {data && data.type === SessionType.WithProfile &&
                         <b>
                             <li><Link href={`/wallet`}><RiWallet2Line size={24} />钱包</Link></li>
                             <li><Link href={`/settings`}><RiSettingsLine size={24} />设置</Link></li>
                             <li><Link href={`/login`}> <RiLogoutBoxRLine size={24} />注销</Link></li>
+                            <li></li>
                         </b>
                     }
 
 
-                    <li></li>
                     <li><a onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
                         {theme === 'dark' ?
                             (<RiSunLine size={24} />)
diff --git a/components/header/header.tsx b/components/header/header.tsx
index e2f932a..5ae6804 100644
--- a/components/header/header.tsx
+++ b/components/header/header.tsx
@@ -15,7 +15,7 @@ export default function Header() {
 
 
 
-            <div className="navbar py-2 lg:py-0  px-0 lg:px-2 w-100vw sm:border-b bg-base-100  hidden sm:flex fixed top-0 left-0 z-50">
+            <div className="navbar py-0 px-0 lg:px-2 md:border-b bg-base-100  hidden md:flex fixed top-0 left-0 z-50">
 
 
                 <div className="navbar-start">
@@ -31,7 +31,7 @@ export default function Header() {
                         </motion.div>
                     </a>
 
-                    <label className="input w-48 lg:w-72 input-bordered flex items-center gap-2">
+                    <label className="input w-44 lg:w-72 input-bordered flex items-center gap-2">
                         <input type="text" className="grow" placeholder="搜索" />
                         <RiSearchLine size={24} />
                     </label>
@@ -52,24 +52,24 @@ export default function Header() {
                         </li> */}
                         <li><Link
                             href='/'
-                            className={`btn btn-ghost btn-primary lg:btn-md ${pathname === "/" ? "btn-active " : ""}`}>
+                            className={`btn btn-ghost btn-primary  lg:text-xl ${pathname === "/" ? "btn-active text-info" : ""}`}>
                             首页
                         </Link></li>
 
                         <li> <Link
                             href='/find'
-                            className={`btn btn-ghost btn-primary lg:btn-md ${pathname && pathname.startsWith("/find") ? "btn-active " : ""}`}>
+                            className={`btn btn-ghost btn-primary  lg:text-xl ${pathname && pathname.startsWith("/find") ? "btn-active text-info" : ""}`}>
                             发现
                         </Link></li>
 
                         <li> <Link
-                            href='/message'
-                            className={` btn btn-ghost btn-primary lg:btn-md ${pathname && pathname.startsWith("/message") ? "btn-active " : ""}`}>
+                            href='/message/chat'
+                            className={` btn btn-ghost btn-primary  lg:text-xl ${pathname && pathname.startsWith("/message") ? "btn-active text-info" : ""}`}>
                             消息
                         </Link></li>
                         <li> <Link
                             href='/profile'
-                            className={`btn btn-ghost btn-primary lg:btn-md ${pathname && pathname.startsWith("/profile") ? "btn-active " : ""}`}>
+                            className={`btn btn-ghost btn-primary  lg:text-xl ${pathname && pathname.startsWith("/profile") ? "btn-active text-info" : ""}`}>
                             资料
                         </Link></li>
                     </ul>
@@ -82,34 +82,25 @@ export default function Header() {
             </div>
 
 
-            {["/find", "/message", "/profile"].includes(pathname) ? (
+{/*             {["/find", "/message/chat", "/profile"].includes(pathname) ? (
                 <div className="sm:hidden flex navbar border-b sm:border-0 w-100vw p-0">
                     {pathname === "/find" && <Find />}
-                    {pathname === "/message" && <Message />}
+                    {pathname === "/message/chat" && <Message />}
                     {pathname && pathname.startsWith("/profile") && null}
                     {pathname === "/profile" && <Profile />}
                     {pathname === `/@` && <Users />}
                 </div>
-            ) : null}
+            ) : null} */}
 
 
 
 
         </>)
 }
-function Users() {
-    return (
-        <div className="navbar">
-            <div className=" navbar-start"> </div>
-            <div className=" navbar-center">用户</div>
-            <div className=" navbar-end"> </div>
-        </div>
-    )
-}
 
 function Find() {
     return (
-        <div className="navbar">
+        <div className="navbar py-0">
             <div className=" navbar-start"> </div>
             <div className=" navbar-center">发现</div>
             <div className=" navbar-end">
@@ -123,7 +114,7 @@ function Find() {
 
 function Message() {
     return (
-        <div className="navbar">
+        <div className="navbar py-0">
             <div className=" navbar-start"> </div>
             <div className=" navbar-center">消息</div>
             <div className=" navbar-end"> </div>
@@ -133,7 +124,7 @@ function Message() {
 
 function Profile() {
     return (
-        <div className="navbar">
+        <div className="navbar py-0">
             <div className="navbar-start">
             </div>
             <div className="navbar-center"> </div>
@@ -142,4 +133,15 @@ function Profile() {
             </div>
         </div>
     )
-}
\ No newline at end of file
+}
+
+
+function Users() {
+    return (
+        <div className="navbar py-0">
+            <div className=" navbar-start"> </div>
+            <div className=" navbar-center">用户</div>
+            <div className=" navbar-end"> </div>
+        </div>
+    )
+}
diff --git a/components/nav/NavHeader.tsx b/components/nav/NavHeader.tsx
new file mode 100644
index 0000000..7054493
--- /dev/null
+++ b/components/nav/NavHeader.tsx
@@ -0,0 +1,74 @@
+'use client'
+import { usePathname } from "next/navigation";
+import { RiAddCircleLine, RiSearchLine } from "react-icons/ri";
+import { LoginButton } from "../header/LoginButton";
+
+export default function NavHeader() {
+    const pathname = usePathname();
+
+    return (
+        <>
+            {["/find", , "/profile"].includes(pathname) ? (
+                <div className="sm:hidden flex navbar border-b sm:border-0 w-100vw p-0">
+                    {pathname === "/find" && <Find />}
+                    {/* {pathname === "/message/chat" && <Message />} */}
+                    {pathname && pathname.startsWith("/profile") && null}
+                    {pathname === "/profile" && <Profile />}
+                    {pathname === `/@` && <Users />}
+                </div>
+            ) : null}
+        </>
+    )
+}
+
+function Find() {
+    return (
+        <div className="navbar py-0">
+            <div className=" navbar-start"> </div>
+            <div className=" navbar-center">发现</div>
+            <div className=" navbar-end">
+                <button className="btn btn-square btn-ghost">
+                    <RiSearchLine size={24} />
+                </button>
+            </div>
+        </div>
+    )
+}
+
+function Message() {
+    return (
+        <div className="navbar py-0">
+            <div className=" navbar-start"> </div>
+            <div className=" navbar-center">消息</div>
+            <div className=" navbar-end">
+                <button className="btn btn-square  btn-ghost">
+                    <RiAddCircleLine size={24}/>
+                </button>
+            </div>
+        </div>
+    );
+}
+
+function Profile() {
+    return (
+        <div className="navbar py-0">
+            <div className="navbar-start">
+            </div>
+            <div className="navbar-center"> </div>
+            <div className="navbar-end">
+                <LoginButton />
+            </div>
+        </div>
+    )
+}
+
+
+function Users() {
+    return (
+        <div className="navbar py-0">
+            <div className=" navbar-start"> </div>
+            <div className=" navbar-center">用户</div>
+            <div className=" navbar-end"> </div>
+        </div>
+    )
+}
diff --git a/components/nav/Navbar.tsx b/components/nav/Navbar.tsx
index 3957533..4a2f94e 100644
--- a/components/nav/Navbar.tsx
+++ b/components/nav/Navbar.tsx
@@ -4,44 +4,44 @@ import Link from "next/link";
 
 import { usePathname, } from 'next/navigation'
 
-import { RiApps2Fill, RiApps2Line, RiHome5Fill, RiHome5Line, RiMessage2Fill, RiMessage2Line, RiMessage3Fill, RiMessage3Line, RiMessageFill, RiMessageLine, RiUserFill, RiUserLine } from "react-icons/ri";
+import { RiApps2Fill, RiApps2Line, RiArchiveFill, RiArchiveLine, RiHome5Fill, RiHome5Line, RiMessageFill, RiMessageLine, RiUserFill, RiUserLine } from "react-icons/ri";
 
 
-export default function Home() {
+export default function NavNavLink() {
     return (
         <div >
 
-            <div className="sm:hidden flex fixed bottom-0 w-dvw h-14 bg-[var(--background-end-rgb)] backdrop-filter backdrop-saturate-180 backdrop-blur-16 border-t">
+            <div className="md:hidden flex fixed bottom-0 w-dvw h-14 bg-[var(--background-end-rgb)] backdrop-filter backdrop-saturate-180 backdrop-blur-16 border-t-[0.8px]">
 
                 <NavLink
                     href='/'
                     activeHrefs={['/', "/article", "/image", "/music", "/video",]}
-                    icon={<RiHome5Line className="size-7" />}
-                    activeIcon={<RiHome5Fill className="size-7" />}
+                    icon={<RiHome5Line className="size-6" />}
+                    activeIcon={<RiHome5Fill className="size-6" />}
                     text='首页'
                 />
 
                 <NavLink
                     href='/find'
                     activeHrefs={['/find']}
-                    icon={<RiApps2Line className="size-7" />}
-                    activeIcon={<RiApps2Fill className="size-7" />}
+                    icon={<RiApps2Line className="size-6" />}
+                    activeIcon={<RiApps2Fill className="size-6" />}
                     text='发现'
                 />
 
                 <NavLink
-                    href='/message'
-                    activeHrefs={['/message']}
-                    icon={<RiMessageLine   className="size-7" />}
-                    activeIcon={<RiMessageFill   className="size-7" />}
+                    href='/message/chat'
+                    activeHrefs={['/message/chat','/message/community','/message/notice',]}
+                    icon={<RiArchiveLine    className="size-6" />}
+                    activeIcon={<RiArchiveFill   className="size-6" />}
                     text='消息'
                 />
 
                 <NavLink
                     href={`/profile`}
                     activeHrefs={[`/profile`]}
-                    icon={<RiUserLine className="size-7" />}
-                    activeIcon={<RiUserFill className="size-7" />}
+                    icon={<RiUserLine className="size-6" />}
+                    activeIcon={<RiUserFill className="size-6" />}
                     text='资料'
                 />
 
@@ -70,7 +70,7 @@ function NavLink({ href, activeIcon, icon, activeHrefs, text }) {
 
     return (
         <Link
-            className={`flex-1 flex flex-col items-center justify-center h-full  text-[var(--navlink-color)] hover:bg-[var(--link-hover-background)] ${isActive ? 'text-[var(--foreground-rgb)]' : ''}`}
+            className={`flex-1 flex flex-col items-center justify-center h-full  text-[var(--navlink-color)] hover:bg-[var(--link-hover-background)] ${isActive ? ' text-info' : ''}`}
             href={href}
             prefetch={true} passHref
         >
diff --git a/components/postslist/InteractCard.tsx b/components/postslist/InteractCard.tsx
index 63e31ca..2e7d643 100644
--- a/components/postslist/InteractCard.tsx
+++ b/components/postslist/InteractCard.tsx
@@ -4,24 +4,24 @@ import { RiChat1Line, RiHeart3Line, RiRepeat2Line, RiShieldCheckLine } from "rea
 export default function interactCard({ dataname }) {
   const router = useRouter();
   return (
-      <div className='sm:max-w-[50%] w-dvw justify-around flex items-center mt-1'>
-          <button className=" grid justify-items-center pt-1 rounded-full size-7  hover:bg-primary/30" onClick={() => router.push(`/${dataname.by.handle.localName}.lens/posts/${dataname.id}`)} >
+      <div className='sm:max-w-[50%] w-dvw justify-around flex items-center mt-1 text-error-content'>
+          <button className=" grid justify-items-center pt-1 rounded-full size-7  hover:text-info" onClick={() => router.push(`/${dataname.by.handle.localName}.lens/posts/${dataname.id}`)} >
             <RiChat1Line className="size-5 " />
             <p>{dataname.stats.comments}</p>
 
           </button>
 
-          <button className=" grid justify-items-center pt-1 rounded-full size-7  hover:bg-rose-600/30"  >
+          <button className=" grid justify-items-center pt-1 rounded-full size-7  hover:text-error"  >
             <RiHeart3Line className="size-5 " />{/* RiHeart3Fill  */}
             <p>{dataname.stats.upvotes}</p>
           </button>
 
-          <button className=" grid justify-items-center pt-1 rounded-full size-7  hover:bg-sky-400/30"  >
-            <RiRepeat2Line className="size-5 " />
+          <button className=" grid justify-items-center pt-1 rounded-full size-7  hover:text-success"  >
+            <RiRepeat2Line className="size-5" />
             <p>{dataname.stats.mirrors}</p>
           </button>
 
-          <button className=" grid justify-items-center pt-1 rounded-full size-7  hover:bg-emerald-600/30"  >
+          <button className=" grid justify-items-center pt-1 rounded-full size-7  hover:text-[#00d176]"  >
             <RiShieldCheckLine className="size-5 " />
             <p>{dataname.stats.collects}</p>
           </button>
diff --git a/components/postslist/PosText.tsx b/components/postslist/PosText.tsx
index a44153e..f15681f 100644
--- a/components/postslist/PosText.tsx
+++ b/components/postslist/PosText.tsx
@@ -22,7 +22,7 @@ const PosText = ({ content }) => {
       </ReactMarkdown>
       {lines.length > MAX_LINES && (
         <button
-          className=" text-orange-600 cursor-pointer"
+          className=" text-info cursor-pointer"
           onClick={() => setExpanded(!expanded)}
         >
           {expanded ? '收起' : '更多'}
diff --git a/config/Wagmi.tsx b/config/Wagmi.tsx
index 4c34d9c..e0eb294 100644
--- a/config/Wagmi.tsx
+++ b/config/Wagmi.tsx
@@ -11,7 +11,7 @@ if (!projectId) throw new Error('Project ID is not defined')
 const metadata = {
   name: 'VimCord',
   description: 'VimCord Socialize Dapp',
-  url: '/',
+  url: 'https://vimcord.vercel.com',
   icons: ['/favicon.ico']
 }
 
diff --git a/config/Web3Modal.tsx b/config/Web3Modal.tsx
index e96399a..925b727 100644
--- a/config/Web3Modal.tsx
+++ b/config/Web3Modal.tsx
@@ -23,7 +23,8 @@ createWeb3Modal({
   featuredWalletIds: [
     'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96',
     '971e689d0a5be527bac79629b4ee9b925e82208e5168b733496a09c0faed0709',
-    '8a0ee50d1f22f6651afcae7eb4253e52a3310b90af5daef78a8c4929a9bb99d4'
+    '225affb176778569276e484e1b92637ad061b01e13a048b35a9d280c3b58970f',
+    'fd20dc426fb37566d803205b19bbc1d4096b248ac04548e3cfb6b3a38bd033aa',
   ],
   themeVariables: ({
     //'--w3m-font-family': 'Roboto, sans-serif',//Base 字体系列
@@ -31,7 +32,7 @@ createWeb3Modal({
     //'--w3m-color-mix': '#C0E218',//与默认颜色混合的颜色
     //'--w3m-color-mix-strength': 5,//“--w3m-color-mix”应该混合多少的百分比
     //'--w3m-font-size-master': '2px',// 的基本像素大小
-    '--w3m-border-radius-master': '1px',//基本边框半径（以像素为单位）
+    '--w3m-border-radius-master': '3px',//基本边框半径（以像素为单位）
     //'--w3m-z-index': 50
 
 
diff --git a/package-lock.json b/package-lock.json
index 1248d23..8bb6e3d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "lens-zh",
+  "name": "vimcord",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "lens-zh",
+      "name": "vimcord",
       "version": "0.1.0",
       "dependencies": {
         "@lens-protocol/react-web": "^2.2.0",
diff --git a/package.json b/package.json
index 7985077..2869f04 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "lens-zh",
+  "name": "vimcord",
   "version": "0.1.0",
   "private": true,
   "scripts": {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7b4e171..555434b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -35,19 +35,20 @@ const config: Config = {
           "accent": "#3f1de7",
           "neutral": "#9dba0d",
           "base-100": "#ffffff",
-          "info": "#ca8a04",
+          "base-content": "#1d1d1f",
+          "info": "#3f1de7",
           "success": "#00ff00",
           "warning": "#F37121",
           "error": "#ff0000",
-          "--rounded-box": "0rem", //边框半径圆角盒实用类，用于卡片等大型盒子
-          "--rounded-btn": "0rem",//border-radius圆角btn实用程序类，用于按钮和类似元素
-          "--rounded-badge": "0rem", //边框半径圆形徽章实用类，用于徽章及类似产品
+          "--rounded-box": "0.5rem", //边框半径圆角盒实用类，用于卡片等大型盒子
+          "--rounded-btn": "1.5rem",//border-radius圆角btn实用程序类，用于按钮和类似元素
+          "--rounded-badge": "0.5rem", //边框半径圆形徽章实用类，用于徽章及类似产品
           "--animation-btn": "0.25s", //单击按钮时的动画持续时间
           "--animation-input": "0.2s", //复选框、切换、单选等输入的动画持续时间
           "--btn-focus-scale": "0.95", //聚焦按钮时的缩放变换
-          "--border-btn": "1px", //聚焦按钮时的缩放变换
-          "--tab-border": "1px", //选项卡的边框宽度
-          "--tab-radius": "0rem", //选项卡的边界半径
+          "--border-btn": "0.8px", //聚焦按钮时的缩放变换
+          "--tab-border": "0.8px", //选项卡的边框宽度
+          "--tab-radius": "0rem", //选项卡的边界半径 
         },
 
         dark: {
@@ -57,18 +58,19 @@ const config: Config = {
           "accent": "#3f1de7",
           "neutral": "#C0E218",
           "base-100": "#000000",
-          "info": "#ca8a04",
+          "base-content": "#f5f5f7",
+          "info": "#C0E218",
           "success": "#00ff00",
           "warning": "#F37121",
           "error": "#ff0000",
-          "--rounded-box": "0rem", //边框半径圆角盒实用类，用于卡片等大型盒子
-          "--rounded-btn": "0rem",//border-radius圆角btn实用程序类，用于按钮和类似元素
-          "--rounded-badge": "0rem", //边框半径圆形徽章实用类，用于徽章及类似产品
+          "--rounded-box": "1rem", //边框半径圆角盒实用类，用于卡片等大型盒子
+          "--rounded-btn": "1.5rem",//border-radius圆角btn实用程序类，用于按钮和类似元素
+          "--rounded-badge": "1rem", //边框半径圆形徽章实用类，用于徽章及类似产品
           "--animation-btn": "0.25s", //单击按钮时的动画持续时间
           "--animation-input": "0.2s", //复选框、切换、单选等输入的动画持续时间
           "--btn-focus-scale": "0.95", //聚焦按钮时的缩放变换
-          "--border-btn": "1px", //聚焦按钮时的缩放变换
-          "--tab-border": "1px", //选项卡的边框宽度
+          "--border-btn": "0.8px", //聚焦按钮时的缩放变换
+          "--tab-border": "0.8px", //选项卡的边框宽度
           "--tab-radius": "0rem", //选项卡的边界半径 
         }
       }