Version 7.5 (新增路段搜尋功能、介面優化等...)

Lin-Rexter · Nov 16, 2024 · ddbb49a · ddbb49a
1 parent b5ec0dd
commit ddbb49a
Show file tree

Hide file tree

Showing 10 changed files with 793 additions and 196 deletions.
diff --git a/.env.local.example b/.env.local.example
@@ -1,4 +1,7 @@
 NEXT_PUBLIC_MAPBOX_TOKENS = ''
+NEXT_PUBLIC_MAPBOX_STYLE = 'mapbox://styles/retex/clybowush00n301pr4vuz4fbf'
+
+NEXT_PUBLIC_POLSTAR_API_KEY = ''
 
 NEXT_PUBLIC_Client_ID = ''
 NEXT_PUBLIC_Client_Secret = ''

diff --git a/package.json b/package.json
@@ -67,5 +67,5 @@
     "net": false,
     "tls": false
   },
-  "packageManager": "pnpm@9.1.3+sha256.7f63001edc077f1cff96cacba901f350796287a2800dfa83fe898f94183e4f5f"
-}
+  "packageManager": "pnpm@9.12.3+sha512.cce0f9de9c5a7c95bef944169cc5dfe8741abfb145078c0d508b868056848a87c81e626246cb60967cbd7fd29a6c062ef73ff840d96b3c86c40ac92cf4a813ee"
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
@@ -10,7 +10,7 @@ const DynamicNavbar = dynamic(
 
 const Header = () => {
     return (
-        <header className="sticky top-0 z-50 h-fit shadow border-b border-gray-200 dark:border-gray-600 z-[999999]">
+        <header className="sticky top-0 h-fit shadow border-b border-gray-200 dark:border-gray-600 z-[50]">
             <DynamicNavbar />
         </header>
     )

diff --git a/src/components/Header/navbar/index.jsx b/src/components/Header/navbar/index.jsx
@@ -16,7 +16,7 @@ import { ClerkProvider, SignInButton, SignedIn, SignedOut, UserButton, SignUp }
 function IsUrl(url_name) {
     const pathname = usePathname()
 
-    //console.log("\n當前網址/: ", pathname)
+    //console.log("\n當前網址: ", pathname)
 
     return true ? (pathname == url_name) : false
 }
@@ -30,13 +30,18 @@ const MapHeader = () => {
 
     return (
         <div className='flex cursor-pointer text-5xl m-0 p-0 text-gray-900 rounded rounded-full border border-4 hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700 hover:bg-gray-700'>
-            <IoIosRefreshCircle title="重新整理" onClick={() => {
-                isLoading = true
-                router.refresh()
-                setTimeout(() => {
-                    isLoading = false
-                }, 1000)
-            } /*router.refresh() && router.push('#')*/} />
+            <IoIosRefreshCircle
+                title="重新整理"
+                onClick={
+                    () => {
+                        isLoading = true
+                        router.refresh()
+                        setTimeout(() => {
+                            isLoading = false
+                        }, 1000)
+                    } /*router.refresh() && router.push('#')*/
+                }
+            />
         </div>
     )
 }
@@ -47,6 +52,7 @@ const Navbar_Component = () => {
     const [currentDateTime, setCurrentDateTime] = useState('');
 
     const toggleMenu = () => setIsOpen(!isOpen);
+
     /*const toggleDarkMode = () => {
         setIsDarkMode(!isDarkMode);
         document.documentElement.classList.toggle('dark');
@@ -76,8 +82,8 @@ const Navbar_Component = () => {
     //const router = useRouter()
 
     return (
-        <nav className="relative w-full bg-white dark:bg-gray-900 py-4 lg:py-0">
-            <div className={`max-w-screen-xl flex flex-wrap items-center justify-between mx-auto px-2 py-1`}>
+        <nav className="relative w-full bg-white dark:bg-gray-900 py-0">
+            <div className={`max-w-screen-xl flex flex-wrap items-center justify-between mx-auto px-2 py-3`}>
                 <Link href="/" className="flex items-center space-x-3 rtl:space-x-reverse">
                     <Image
                         src="/traffic_congestion.png"
@@ -100,19 +106,22 @@ const Navbar_Component = () => {
                 </Link>
 
                 <Button
+                    onClick={toggleMenu}
                     data-collapse-toggle="navbar-default"
                     type="button"
                     className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
                     aria-controls="navbar-default"
-                    aria-expanded="false">
+                    aria-expanded="false"
+                >
                     <span className="sr-only">{isOpen ? '關閉' : '選單'}</span>
                     <svg className="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
                         <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 1h15M1 7h15M1 13h15" />
                     </svg>
                 </Button>
 
-                <div className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-default">
-                    <ul className="flex justify-center md:items-center flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
+
+                <div className={`items-center justify-between w-full md:flex md:w-auto md:order-1  ${isOpen ? 'h-100' : 'h-0 hidden'} transition-all ease-in-out duration-500`} id="navbar-default">
+                    <ul className={`flex justify-center ${isOpen ? 'h-100 ' : 'h-0'} transition-all  ease-in-out duration-500 md:items-center flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700`}>
                         {/*
                             <li>
                                 <Link href="/contact" className={`block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700 hover:bg-gray-700`}>

diff --git a/src/components/Main/traffic/chat.jsx b/src/components/Main/traffic/chat.jsx
@@ -244,22 +244,22 @@ const ChatBubble = () => {
                                         <div className={`inline-block px-2 py-1 rounded-lg ${group.sender === 'user' ? 'bg-blue-500 text-white' : 'bg-gray-100 text-black'}`}>
                                             <div className='max-w-sm flex flex-wrap flex-auto text-ellipsis overflow-hidden' dangerouslySetInnerHTML={{ __html: marked.parse(msg.text) }}></div>
                                             {/*
-                                        <div className="text-right">
-                                            {group.sender === 'bot' && (
-                                                <div className="inline-flex mt-2 space-x-2 bg-orange-100 rounded-lg px-2 py-0.5">
-                                                    {['👍', '❤️', '👎'].map(reaction => (
-                                                        <button
-                                                            key={reaction}
-                                                            onClick={() => addReaction(groupIndex, msg.id, reaction)}
-                                                            className={`text-xs bg-orange-400 p-1 rounded-full hover:opacity-100 ${msg.reactions && msg.reactions.includes(reaction) ? 'opacity-100' : 'opacity-50'}`}
-                                                        >
-                                                            {reaction}
-                                                        </button>
-                                                    ))}
+                                                <div className="text-right">
+                                                    {group.sender === 'bot' && (
+                                                        <div className="inline-flex mt-2 space-x-2 bg-orange-100 rounded-lg px-2 py-0.5">
+                                                            {['👍', '❤️', '👎'].map(reaction => (
+                                                                <button
+                                                                    key={reaction}
+                                                                    onClick={() => addReaction(groupIndex, msg.id, reaction)}
+                                                                    className={`text-xs bg-orange-400 p-1 rounded-full hover:opacity-100 ${msg.reactions && msg.reactions.includes(reaction) ? 'opacity-100' : 'opacity-50'}`}
+                                                                >
+                                                                    {reaction}
+                                                                </button>
+                                                            ))}
+                                                        </div>
+                                                    )}
                                                 </div>
-                                            )}
-                                        </div>
-                                        */}
+                                            */}
                                         </div>
                                         {msgIndex === (group.messages.length - 1) && (
                                             <p className="text-sm mt-1 opacity-80">

diff --git a/src/components/Main/traffic/index.jsx b/src/components/Main/traffic/index.jsx
@@ -75,6 +75,7 @@ const HomePage = () => {
                         </div>
                     </div>
                 )*/}
+                    {/* 互動式壅塞地圖 */}
                     <Suspense fallback={(
                         <div className="flex h-auto">
                             <div className="inline-flex m-auto items-center px-4 py-2 font-semibold leading-6 text-md shadow rounded-md text-white bg-indigo-500 hover:bg-indigo-400 transition ease-in-out duration-150 cursor-not-allowed">
@@ -95,7 +96,7 @@ const HomePage = () => {
                     </div>
 
                     {/* AI助手 */}
-                    <div className="fixed bottom-[135px] md:bottom-24 right-4 w-auto">
+                    <div className="fixed bottom-[140px] md:bottom-24 right-4 w-auto">
                         {<DynamicChatBubble /> || <Skeleton count={5} />}
                     </div>
                 </div>