refactor: 调整目录结构

app/danmu/page.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-console -- debug */
 "use client";
 import { useRef, useState, useEffect } from "react";
-import { query } from "@/app/lib/actions/lyrics";
+import { query } from "@/lib/actions/lyrics";
 
 const useLyricsRunner = (runner: (lyric: string) => void, interval: number) => {
   const [lyrics, setLyrics] = useState<string[]>([]);

app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import SignoutButton from "./components/signout-button";
 import Logo from "./components/logo";
+import BackButton from "./components/back-button";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -42,7 +43,10 @@ export default function RootLayout({
                 关于
               </a>
             </nav>
-            <SignoutButton className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0" />
+            <div className="join">
+              <BackButton className="btn join-item" />
+              <SignoutButton className="btn join-item" />
+            </div>
           </div>
         </header>
         <main>{children}</main>
@@ -56,9 +60,7 @@ export default function RootLayout({
                 <Logo />
                 <span className="ml-3 text-xl">音乐弹幕</span>
               </a>
-              <p className="mt-2 text-sm text-gray-500">
+              <p className="mt-2 text-sm text-gray-500">歌曲歌词到直播间</p>
-                歌曲歌词到直播间
-              </p>
             </div>
             <div className="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center">
               <div className="lg:w-1/4 md:w-1/2 w-full px-4">

app/music/danmu.tsx

@@ -1,8 +1,8 @@
-'use client';
+"use client";
 import { useState, useEffect, useCallback } from "react";
-import useWebSocket, { ReadyState } from 'react-use-websocket';
+import useWebSocket, { ReadyState } from "react-use-websocket";
 
-const MOMO_IM_URL = 'wss://live-ws.immomo.com/ws/im'
+const MOMO_IM_URL = "wss://live-ws.immomo.com/ws/im";
 
 export const Danmu: React.FC = () => {
   //Public API that will echo messages sent to it back to the client
@@ -11,45 +11,49 @@ export const Danmu: React.FC = () => {
 
   // { "msg_id": 1, "client_time": 1712305590234, "type": "Sauth", "data": { "momoid": "404821828", "roomid": "14515460054", "role": 6, "isVisitor": false, "token": "97e721d0bd3bf2e63a9797f9daf50919", "ua": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36" } }
   const { sendMessage, lastMessage, readyState } = useWebSocket(socketUrl, {
-        heartbeat:
+    heartbeat: {
-        {
       message: () => {
-                const pingMessage = { "msg_id": 2, "client_time": Date.now(), "type": "Ping", "data": {} }
+        const pingMessage = {
+          msg_id: 2,
+          client_time: Date.now(),
+          type: "Ping",
+          data: {},
+        };
         return JSON.stringify(pingMessage);
       },
       interval: 5000,
-        }
+    },
   });
 
-    const momoId = "404821828"
+  const momoId = "404821828";
-    const roomId = "14515460054"
+  const roomId = "14515460054";
-    const momoToken = "97e721d0bd3bf2e63a9797f9daf50919"
+  const momoToken = "97e721d0bd3bf2e63a9797f9daf50919";
 
-    const clientTime = Date.now()
+  const clientTime = Date.now();
   const data = {
-        "msg_id": 1,
+    msg_id: 1,
-        "client_time": clientTime,
+    client_time: clientTime,
-        "type": "Sauth",
+    type: "Sauth",
-        "data": {
+    data: {
-            "momoid": momoId, "roomid": roomId,
+      momoid: momoId,
-            "role": 6, "isVisitor": false,
+      roomid: roomId,
-            "token": momoToken
+      role: 6,
+      isVisitor: false,
+      token: momoToken,
     },
-    }
+  };
 
   useEffect(() => {
     if (ReadyState.OPEN === readyState) {
       sendMessage(JSON.stringify(data));
     }
-    }, [readyState])
+  }, [readyState]);
-
-
 
   useEffect(() => {
     if (lastMessage !== null) {
       if (lastMessage.data) {
         const message = JSON.parse(lastMessage.data);
-                if (message.type === 'pong') {
+        if (message.type === "pong") {
           return;
         }
         setMessageHistory((prev) => prev.concat(message));
@@ -57,13 +61,12 @@ export const Danmu: React.FC = () => {
     }
   }, [lastMessage]);
 
-
   const connectionStatus = {
-        [ReadyState.CONNECTING]: 'Connecting',
+    [ReadyState.CONNECTING]: "Connecting",
-        [ReadyState.OPEN]: 'Open',
+    [ReadyState.OPEN]: "Open",
-        [ReadyState.CLOSING]: 'Closing',
+    [ReadyState.CLOSING]: "Closing",
-        [ReadyState.CLOSED]: 'Closed',
+    [ReadyState.CLOSED]: "Closed",
-        [ReadyState.UNINSTANTIATED]: 'Uninstantiated',
+    [ReadyState.UNINSTANTIATED]: "Uninstantiated",
   }[readyState];
 
   return (
@@ -78,19 +81,20 @@ export const Danmu: React.FC = () => {
   );
 };
 
-// TODO
+const MessageDispatcher: React.FC<{ message: any }> = ({ message }) => {
-const MessageDispatcher: React.FC = ({ message }) => {
+  const messageType = message?.groups?.[0]?.units?.[0]?.type;
+  let nick = "wait";
+  let content = "wait";
 
-    const messageType = message?.groups?.[0]?.units?.[0]?.type
+  if (messageType === "Message") {
-    let nick = 'wait';
-    let content = 'wait';
-
-    if (messageType === 'Message') {
     nick = message?.groups?.[0]?.nick;
-        content = message?.groups?.[0]?.units?.[0]?.['Msg.Message.data']?.text
+    content = message?.groups?.[0]?.units?.[0]?.["Msg.Message.data"]?.text;
   }
-    return (<div className="chat chat-start">
+  return (
-        <div className="chat-bubble">{nick}: {content}</div>
+    <div className="chat chat-start">
-    </div>)
+      <div className="chat-bubble">
-
+        {nick}: {content}
+      </div>
+    </div>
+  );
 };

app/music/page.tsx

@@ -1,7 +1,5 @@
 import { Danmu } from "./danmu";
 
 export default function Page() {
-    return <main>hello world
+  return <Danmu />;
-        <Danmu />
-    </main>
 }

app/signin/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { signin } from "@/app/lib/actions/auth";
+import { signin } from "@/lib/actions/auth";
 import Image from "next/image";
 import Link from "next/link";
 import { useFormState, useFormStatus } from "react-dom";

app/signup/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { signup } from "@/app/lib/actions/auth";
+import { signup } from "@/lib/actions/auth";
 import Link from "next/link";
 import { useFormState, useFormStatus } from "react-dom";
 import signupSvg from "@/app/signup/signup.svg";

components/back-button.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+export default function BackButton({
+  className,
+}: {
+  className?: string | undefined;
+}) {
+  const router = useRouter();
+  return (
+    <button
+      className={className}
+      onClick={() => {
+        router.back();
+      }}
+    >
+      回退
+    </button>
+  );
+}

components/signout-button.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { signout } from "@/app/lib/actions/auth";
+import { signout } from "@/lib/actions/auth";
 import { usePathname } from "next/navigation";
 
 export default function SignoutButton({