H5适配

web/src/app/dialogue/page.tsx

@@ -15,6 +15,7 @@ import {
   RiVipDiamondFill,
   RiDeleteBinLine,
   RiCloseFill,
+  RiArrowDropRightLine,
 } from "react-icons/ri";
 import {
   getChatSession,
@@ -60,6 +61,7 @@ export default function Dialogue() {
     []
   );
   const [showVip, setShowVip] = useState(false);
+  const [showLeftBox, setShowLeftBox] = useState(false);
   const [balance, setBalance] = useState<number>(0);
 
   //历史记录和智能体列表 显示隐藏
@@ -103,6 +105,8 @@ export default function Dialogue() {
     } else {
       chatInit(id, Storage_getAgentId());
     }
+
+    setShowLeftBox(false);
   };
   //助手列表 - 点击
   const changeChatListForLocal = (id: number) => {
@@ -124,6 +128,7 @@ export default function Dialogue() {
       }
       loadChatSession(id, "");
     }
+    setShowLeftBox(false);
   };
   //新对话
   const newChat = () => {
@@ -147,6 +152,7 @@ export default function Dialogue() {
     setTimeout(() => {
       setShowComponent(true);
     }, 200);
+    setShowLeftBox(false);
   };
   //设置新会话的ID
   const setConversationId = (id: string) => {
@@ -262,11 +268,10 @@ export default function Dialogue() {
     if (conversationId !== null && conversationId !== "") {
       setConversationId(conversationId);
     }
-    
+
     loadChatSession(agentId, chatSessionLastId);
 
     getBalance();
-
   }, [loginShow, chatSessionLastId]);
 
   //样式覆盖
@@ -370,24 +375,11 @@ export default function Dialogue() {
 
   return (
     <>
-      <div
-        className="flex justify-between items-center bg-[slate-200] dark:bg-[#000]"
-        style={{ height: "100%" }}
-      >
+      <div className="flex justify-between items-center bg-[slate-200] dark:bg-[#000] h-full">
         {showLeftLetter && (
-          <div
-            className="bg-[#f8f9fa] dark:bg-[#202123] border-r-1 border-indigo-100 dark:border-blue-950"
-            style={{
-              height: "calc(100vh - 5rem)",
-              width: "20rem",
-            }}
-          >
+          <div className="bg-[#f8f9fa] dark:bg-[#202123] border-r-1 border-indigo-100 dark:border-blue-950 w-80 h-calc-8 md:h-calc-5 hidden md:block">
             <div
-              className={`bg-[#f8f9fa] dark:bg-[#202123] border-r-1 border-indigo-100 dark:border-blue-950 overflow-auto scroll-smooth shrink-0`}
-              style={{
-                height: "calc(100vh - 10rem)",
-                width: "20rem",
-              }}
+              className={`bg-[#f8f9fa] dark:bg-[#202123] border-r-1 border-indigo-100 dark:border-blue-950 overflow-auto scroll-smooth shrink-0 w-80 h-calc-13 md:h-calc-10`}
             >
               <div className="sticky top-0 z-50 dark:shadow-[rgba(255,255,255,.15)] backdrop-blur dark:bg-transparent transition-all">
                 <div className="flex justify-between items-center pt-2 px-2">
@@ -550,13 +542,7 @@ export default function Dialogue() {
                 )}
             </div>
 
-            <div
-              className="text-sm"
-              style={{
-                height: "5rem",
-                width: "20rem",
-              }}
-            >
+            <div className="text-sm h-20 w-80">
               <div className="px-3 py-3 border-t-2 border-blue-50 shadow-sm dark:border-blue-950 dark:text-[#bc900c]">
                 <p className="flex items-center">
                   <RiVipDiamondFill className="text-[#f4a629]" />
@@ -581,10 +567,7 @@ export default function Dialogue() {
           }}
         >
           <div
-            className={`bg-[#fcfdff] dark:bg-[#202123] grow`}
-            style={{
-              height: "calc(100vh - 5rem)",
-            }}
+            className={`bg-[#fcfdff] dark:bg-[#202123] grow  h-calc-8 md:h-calc-5`}
           >
             {showComponent && (
               <ProChat
@@ -723,11 +706,7 @@ export default function Dialogue() {
 
         {employeeSearch != null && (
           <div
-            className={`bg-[#ecf1f9] dark:bg-[#202123] border-l-1 border-indigo-100 dark:border-blue-950 overflow-auto scroll-smooth shrink-0`}
-            style={{
-              height: "calc(100vh - 5rem)",
-              width: "25rem",
-            }}
+            className={`bg-[#ecf1f9] dark:bg-[#202123] border-l-1 border-indigo-100 dark:border-blue-950 overflow-auto scroll-smooth shrink-0 h-calc-8 md:h-calc-5 w-96 hidden xl:block`}
           >
             <div className="">
               <div className="h-96 w-11/12 mx-auto relative">
@@ -798,15 +777,222 @@ export default function Dialogue() {
         )}
       </div>
 
+      <div
+        className="absolute -left-5 top-1/2 transform -translate-y-1/2 rounded-full bg-[#ecf1f9] p-1 shadow-lg  md:hidden block dark:bg-blue-950"
+        onClick={() => {
+          setShowLeftBox(true);
+        }}
+      >
+        <RiArrowDropRightLine className="text-3xl text-[#0061ff] ml-3" />
+      </div>
+
+      {showLeftBox && (
+        <div className="pay-box">
+          <div className="pay-mask"></div>
+          <div className="pay-div md:p-7 bg-white dark:bg-gray-900 text-base rounded w-full md:container h-screen">
+            <div className="h-full overflow-y-auto">
+              <div className="bg-[#f8f9fa] dark:bg-[#202123] w-full">
+                <div
+                  className={`bg-[#f8f9fa] dark:bg-[#202123] overflow-auto scroll-smooth shrink-0 w-full h-calc-5`}
+                >
+                  <div className="sticky top-0 z-50 dark:shadow-[rgba(255,255,255,.15)] backdrop-blur dark:bg-transparent transition-all">
+                    <div className="flex justify-between items-center pt-2 px-2">
+                      <div>
+                        <button
+                          className="inline-flex py-1 px-1 rounded-lg items-center text-white global-bg-color"
+                          onClick={newChat}
+                        >
+                          <RiAddCircleFill className="w-6 h-6" />
+                          <span className="ml-1 pr-2 flex items-start flex-col leading-none">
+                            <span className="title-font font-medium">
+                              新对话
+                            </span>
+                          </span>
+                        </button>
+                      </div>
+                      <div
+                        className="cursor-pointer text-gray-400 hover:text-blue-600"
+                        onClick={() => {
+                          setShowLeftBox(false);
+                        }}
+                      >
+                        <RiCloseFill className="absolute right-2.5 top-2.5 w-8 h-8 cursor-pointer transform duration-500 ease-in-out hover:scale-125 text-gray-500"></RiCloseFill>
+                      </div>
+                    </div>
+                    <div className="w-full mt-4">
+                      <div className="flex mx-auto flex-wrap justify-center border-b-2 border-blue-50 shadow-sm dark:border-blue-950 pb-2">
+                        <a
+                          className={`cursor-pointer py-1 px-4 mx-4 rounded-lg ${
+                            historyOrChatList === 0
+                              ? "global-txt-color"
+                              : "dark:text-gray-500"
+                          }`}
+                          onClick={() => {
+                            setHistoryOrChatList(0);
+                          }}
+                        >
+                          对话历史
+                        </a>
+                        <a
+                          className={`cursor-pointer py-1 px-4 mx-4 rounded-lg ${
+                            historyOrChatList === 1
+                              ? "global-txt-color"
+                              : "dark:text-gray-500"
+                          }`}
+                          onClick={() => {
+                            setHistoryOrChatList(1);
+                          }}
+                        >
+                          助手列表
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+
+                  {historyOrChatList === 0 &&
+                    chatSessionList !== null &&
+                    chatSessionList.length > 0 && (
+                      <div className="py-4 px-2">
+                        <div className="mx-auto flex flex-col">
+                          {chatSessionList.map((item) => (
+                            <div
+                              className="w-full mt-3 cursor-pointer"
+                              key={item.id}
+                              onClick={() => changeChatSession(item.id)}
+                            >
+                              <div
+                                className={`flex rounded border ${
+                                  Storage_getConversationId() == item.id &&
+                                  Storage_getListType() === historyOrChatList
+                                    ? "dark:border-[#0061ff] bg-blue-50 dark:bg-gray-800 text-[#0061ff]"
+                                    : "border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400"
+                                } p-3 sm:flex-row flex-col`}
+                              >
+                                <div className="flex-grow text-ellipsis line-clamp-2">
+                                  <h2 className="pb-2">{item.name}</h2>
+                                  <p className="text-sm text-gray-400">
+                                    {new Date(item.createdAt).toLocaleString()}
+                                  </p>
+                                </div>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  {historyOrChatList === 0 &&
+                    (chatSessionList === null ||
+                      chatSessionList.length == 0) && (
+                      <div className="w-full px-5 text-gray-200 dark:text-gray-600 flex flex-col mt-20">
+                        <div className="flex justify-center">
+                          <RiCalendarCloseLine className="w-16 h-16 text-center" />
+                        </div>
+                        <div className="text-center mt-4">对话历史空空如也</div>
+                      </div>
+                    )}
+
+                  {historyOrChatList === 1 &&
+                    chatAiModelList !== null &&
+                    chatAiModelList.length > 0 && (
+                      <div className="py-4 px-2">
+                        <div className="mx-auto flex flex-col">
+                          {chatAiModelList.map((item) => (
+                            <div className="w-full mt-3" key={item.id}>
+                              <div
+                                className={`flex rounded border group ${
+                                  Storage_getAgentId() == item.id &&
+                                  Storage_getListType() === historyOrChatList
+                                    ? "dark:border-[#0061ff] bg-blue-50 dark:bg-gray-800 text-[#0061ff]"
+                                    : "border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400"
+                                }  p-3 sm:flex-row flex-col`}
+                              >
+                                <div className="flex flex-row relative">
+                                  <Popconfirm
+                                    title="删除提醒"
+                                    description="确定删除当前智能助手吗?"
+                                    onConfirm={() =>
+                                      confirmDeletLocalChat(item.id)
+                                    }
+                                    okText="确定"
+                                    cancelText="取消"
+                                  >
+                                    <RiDeleteBinLine className="absolute top-0.5 right-0.5 cursor-pointer group-hover:block hidden" />
+                                  </Popconfirm>
+                                  <div className="shrink-0 inline-flex items-center justify-center h-16 overflow-hidden">
+                                    <img
+                                      src={item.avatar}
+                                      className="h-16 cursor-pointer"
+                                      onClick={() =>
+                                        changeChatListForLocal(item.id)
+                                      }
+                                    />
+                                  </div>
+                                  <div className="flex-grow pl-2 pt-2">
+                                    <h2
+                                      className="text-base mb-1 line-clamp-1 text-ellipsis pr-5 cursor-pointer"
+                                      onClick={() =>
+                                        changeChatListForLocal(item.id)
+                                      }
+                                    >
+                                      {item.name}
+                                    </h2>
+                                    <p
+                                      className="text-sm line-clamp-1 text-ellipsis cursor-pointer"
+                                      onClick={() =>
+                                        changeChatListForLocal(item.id)
+                                      }
+                                    >
+                                      {item.estimate}
+                                    </p>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  {historyOrChatList === 1 &&
+                    (chatAiModelList === null ||
+                      chatAiModelList.length == 0) && (
+                      <div className="w-full px-5 text-gray-200 dark:text-gray-600 flex flex-col mt-20">
+                        <div className="flex justify-center">
+                          <RiCalendarCloseLine className="w-16 h-16 text-center" />
+                        </div>
+                        <div className="text-center mt-4">当前助手空空如也</div>
+                      </div>
+                    )}
+                </div>
+
+                <div className="text-sm h-20 w-full">
+                  <div className="px-3 py-3 border-t-2 border-blue-50 dark:border-blue-950 dark:text-[#bc900c]">
+                    <p className="flex items-center">
+                      <RiVipDiamondFill className="text-[#f4a629]" />
+                      <span className="ml-2">普通额度 {balance} 积分</span>
+                    </p>
+                    <p className="flex items-center mt-2">
+                      <RiVipDiamondFill className="text-[#c81021]" />
+                      <span className="ml-2">高级额度 {balance} 积分</span>
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
       {showVip && (
         <div className="pay-box">
           <div className="pay-mask"></div>
-          <div className="pay-div p-7 bg-white dark:bg-gray-900 text-base rounded container">
+          <div className="pay-div pt-12 md:p-7 bg-white dark:bg-gray-900 text-base rounded w-full md:container h-screen">
             <RiCloseFill
               className="absolute right-2.5 top-2.5 w-8 h-8 cursor-pointer transform duration-500 ease-in-out hover:scale-125 text-gray-500"
               onClick={closeVipBox}
             ></RiCloseFill>
-            <VipPage></VipPage>
+            <div className="h-full overflow-y-auto">
+              <VipPage></VipPage>
+            </div>
           </div>
         </div>
       )}

web/src/app/globals.scss

@@ -288,9 +288,7 @@ select:focus {
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  width: 480px;
-  height: 490px;
-  padding: 24px 38px 19px;
+  padding: 24px 38px 38px;
   border-radius: 8px;
   background: #fff url("../../public/images/login-bg.png") 0 0 / 100% no-repeat;
 }

web/src/app/page.tsx

@@ -10,7 +10,11 @@ import {
 import { useGlobalContext } from "@/providers/GlobalProvider";
 import { getCategoryList, getEmployeeSearch } from "@/api/client";
 import { CategoryListResult, EmployeeSearchResult } from "@/utils/clientsApis";
-import { Storage_setListType,Storage_setAgentId,Storage_setConversationId } from "@/utils/chat";
+import {
+  Storage_setListType,
+  Storage_setAgentId,
+  Storage_setConversationId,
+} from "@/utils/chat";
 
 export default function Home() {
   const router = useRouter();
@@ -75,7 +79,7 @@ export default function Home() {
   const addChat = (id: number) => {
     Storage_setListType(1);
     Storage_setAgentId(id);
-    Storage_setConversationId('');
+    Storage_setConversationId("");
     router.push("/dialogue");
   };
 
@@ -98,8 +102,7 @@ export default function Home() {
 
   return (
     <div
-      className="absolute top-0 w-full overflow-auto scroll-smooth"
-      style={{ height: "calc(100vh - 5rem)" }}
+      className="absolute top-0 w-full overflow-auto scroll-smooth h-calc-8 md:h-calc-5"
       onScroll={handleScroll}
       ref={boxRef}
     >
@@ -125,38 +128,69 @@ export default function Home() {
                 isFocused ? "text-[#0061ff]" : "text-gray-400"
               }`}
             >
-              <RiSearch2Line size={24} />
+              <RiSearch2Line size={24} onClick={handleSearch} />
             </div>
           </div>
         </div>
         {categoryList !== null && categoryList.length > 0 && (
           <div className="flex flex-row justify-center py-4">
-            <div className="container mx-auto flex flex-wrap justify-center gap-2 text-sm">
-              <button
-                type="button"
-                className={`px-4 py-1 border rounded-full ${
-                  categoryId == 0
-                    ? "bg-blue-50 dark:bg-blue-950 text-[#0061ff]"
-                    : "text-gray-500 dark:text-gray-500 bg-white dark:bg-gray-800 hover:text-gray-900 dark:hover:text-white hover:bg-blue-50 dark:hover:bg-gray-800"
-                }`}
-                onClick={() => selectCategory(0)}
-              >
-                全部分类
-              </button>
-              {categoryList.map((item) => (
+            <div className="w-full md:container mx-auto flex flex-wrap justify-center gap-2 text-sm">
+              <div className="w-full md:hidden overflow-x-auto scroll-smooth focus:scroll-auto">
+                <div className="flex space-x-2 p-3">
+                  <button
+                    type="button"
+                    className={`px-4 py-1 border rounded-full whitespace-nowrap ${
+                      categoryId == 0
+                        ? "bg-blue-50 dark:bg-blue-950 text-[#0061ff]"
+                        : "text-gray-500 dark:text-gray-500 bg-white dark:bg-gray-800 hover:text-gray-900 dark:hover:text-white hover:bg-blue-50 dark:hover:bg-gray-800"
+                    }`}
+                    onClick={() => selectCategory(0)}
+                  >
+                    全部分类
+                  </button>
+                  {categoryList.map((item) => (
+                    <button
+                      key={item.id}
+                      type="button"
+                      className={`px-4 py-1 border rounded-full whitespace-nowrap ${
+                        categoryId == item.id
+                          ? "bg-blue-50 dark:bg-blue-950 text-[#0061ff]"
+                          : "text-gray-500 dark:text-gray-500 bg-white dark:bg-gray-800 hover:text-gray-900 dark:hover:text-white hover:bg-blue-50 dark:hover:bg-gray-800"
+                      }`}
+                      onClick={() => selectCategory(item.id)}
+                    >
+                      {item.name}
+                    </button>
+                  ))}
+                </div>
+              </div>
+              <div className="hidden md:flex flex-wrap justify-center gap-2">
                 <button
-                  key={item.id}
                   type="button"
                   className={`px-4 py-1 border rounded-full ${
-                    categoryId == item.id
+                    categoryId == 0
                       ? "bg-blue-50 dark:bg-blue-950 text-[#0061ff]"
                       : "text-gray-500 dark:text-gray-500 bg-white dark:bg-gray-800 hover:text-gray-900 dark:hover:text-white hover:bg-blue-50 dark:hover:bg-gray-800"
                   }`}
-                  onClick={() => selectCategory(item.id)}
+                  onClick={() => selectCategory(0)}
                 >
-                  {item.name}
+                  全部分类
                 </button>
-              ))}
+                {categoryList.map((item) => (
+                  <button
+                    key={item.id}
+                    type="button"
+                    className={`px-4 py-1 border rounded-full ${
+                      categoryId == item.id
+                        ? "bg-blue-50 dark:bg-blue-950 text-[#0061ff]"
+                        : "text-gray-500 dark:text-gray-500 bg-white dark:bg-gray-800 hover:text-gray-900 dark:hover:text-white hover:bg-blue-50 dark:hover:bg-gray-800"
+                    }`}
+                    onClick={() => selectCategory(item.id)}
+                  >
+                    {item.name}
+                  </button>
+                ))}
+              </div>
             </div>
           </div>
         )}
@@ -164,11 +198,11 @@ export default function Home() {
 
       {employeeList !== null && employeeList.length > 0 && (
         <section className="text-gray-600 body-font">
-          <div className="container px-5 py-20 mx-auto">
+          <div className="container px-5 py-5 md:py-20 mx-auto">
             <div className="flex flex-wrap -m-4 text-sm">
               {employeeList.map((item) => (
                 <div
-                  className="p-4 lg:w-1/2 xl:w-1/3 transition transform hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:transform-none"
+                  className="p-4 lg:w-1/2 xl:w-1/3 transition transform hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:transform-none grow"
                   key={item.id}
                 >
                   <a
@@ -176,7 +210,7 @@ export default function Home() {
                     className="relative block overflow-hidden rounded-lg border border-gray-100 dark:border-slate-700 p-4 sm:p-6 lg:p-8 shadow-md cursor-pointer hover:bg-blue-50 dark:hover:bg-blue-950"
                   >
                     <span className="absolute inset-x-0 bottom-0 h-2 bg-gradient-to-r from-[#0061ff] via-[#347bec] to-[#6c62fd]"></span>
-                    <div className="sm:flex sm:justify-between sm:gap-4">
+                    <div className="flex justify-between gap-4">
                       <div>
                         <h3 className="text-lg font-bold text-gray-900 dark:text-white sm:text-xl text-ellipsis line-clamp-1 h-8">
                           {item.title}
@@ -185,7 +219,7 @@ export default function Home() {
                           {item.skill}
                         </p>
                       </div>
-                      <div className="hidden sm:block sm:shrink-0">
+                      <div className="shrink-0">
                         <img
                           alt={item.title}
                           src={item.avatar}
@@ -204,7 +238,7 @@ export default function Home() {
             </div>
           </div>
           {isBottom && (
-            <div className="w-full mx-auto text-center text-sm text-gray-400 dark:text-gray-600 pb-6">
+            <div className="w-full mx-auto text-center text-sm text-gray-400 dark:text-gray-600 pb-20 md:pb-6">
               已显示全部智能体
             </div>
           )}

web/src/app/user-center/page.tsx

@@ -221,8 +221,8 @@ const UserCenter = () => {
                 </div>
                 <div className="border border-gray-200 dark:border-slate-700 p-5 rounded-sm mt-6">
                   <div className="text-lg dark:text-white">充值记录</div>
-                  <div className="py-5">
-                    <table className="border border-slate-200 dark:border-slate-700 w-full text-center">
+                  <div className="py-5 overflow-x-auto">
+                    <table className="border border-slate-200 dark:border-slate-700 text-center w-[960px] md:w-full">
                       <thead className="border-b border-slate-200 dark:border-slate-700 bg-gray-100 dark:bg-gray-800 h-12 dark:text-gray-300">
                         <tr>
                           <th className="">订单编号</th>
@@ -251,11 +251,13 @@ const UserCenter = () => {
               </Tabs.TabPane>
               <Tabs.TabPane tab="个人信息" className="dark:text-white" key="2">
                 <div className="border border-gray-200 dark:border-slate-700 p-5 rounded-sm">
-                  <div className="text-lg dark:text-white">用户账户信息设置</div>
+                  <div className="text-lg dark:text-white">
+                    用户账户信息设置
+                  </div>
                   <div className="py-5">
                     <div className="flex flex-col items-center justify-center">
                       <div className="w-full">
-                        <div className="flex w-full flex-col mx-auto px-8 sm:space-x-4 sm:space-y-0 space-y-4 sm:px-0 items-end">
+                        <div className="flex w-full flex-col mx-auto sm:space-x-4 sm:space-y-0 space-y-4 sm:px-0 items-end">
                           <div className="relative flex-grow w-full">
                             <label className="leading-7 text-sm text-gray-600 dark:text-gray-400">
                               昵称
@@ -311,11 +313,13 @@ const UserCenter = () => {
               </Tabs.TabPane>
               <Tabs.TabPane tab="账户安全" key="3">
                 <div className="border border-gray-200 dark:border-slate-700 p-5 rounded-sm">
-                  <div className="text-lg dark:text-white">用户账户信息设置</div>
+                  <div className="text-lg dark:text-white">
+                    用户账户信息设置
+                  </div>
                   <div className="py-5">
                     <div className="flex flex-col items-center justify-center">
                       <div className="w-full">
-                        <div className="flex w-full flex-col mx-auto px-8 sm:space-x-4 sm:space-y-0 space-y-4 sm:px-0 items-end">
+                        <div className="flex w-full flex-col mx-auto sm:space-x-4 sm:space-y-0 space-y-4 sm:px-0 items-end">
                           <div className="relative flex-grow w-full">
                             <label className="leading-7 text-sm text-gray-600 dark:text-gray-400">
                               旧密码

web/src/app/vip/page.tsx

@@ -67,8 +67,8 @@ export default function VipPage() {
 
   return (
     <>
-      <section className="text-gray-600 body-font">
-        <div className="container px-5 py-24 mx-auto">
+      <section className="text-gray-600 body-font mt-6 md:mt-0">
+        <div className="w-full md:container md:px-5 md:py-24 mx-auto">
           <div className="flex flex-col text-center w-full">
             <h1 className="sm:text-4xl text-3xl font-medium title-font mb-2 text-gray-900 dark:text-white">
               会员套餐
@@ -132,7 +132,7 @@ export default function VipPage() {
       {showBuyBox && (
         <div className="pay-box">
           <div className="pay-mask"></div>
-          <div className="pay-div p-7 bg-white dark:bg-gray-900 text-base rounded w-full max-w-screen-lg">
+          <div className="pay-div p-7 bg-white dark:bg-gray-900 text-base rounded w-11/12 lg:w-full max-w-screen-lg">
             <RiCloseFill className="absolute right-2.5 top-2.5 w-8 h-8 cursor-pointer transform duration-500 ease-in-out hover:scale-125 text-gray-500" onClick={closeBuyBox}></RiCloseFill>
             <h2 className="text-xl global-txt-color">会员套餐支付</h2>
             <div className="py-10 grid grid-cols-1 md:grid-cols-2 md:gap-8">

web/src/components/Header/index.tsx

@@ -31,7 +31,7 @@ export default function Header({ name }: { name: string }) {
     <header className="sticky w-full flex gap-4 justify-between items-center top-0 shadow dark:shadow-none backdrop-blur dark:bg-transparent transition-all py-2 px-1 z-50">
       <div className="flex gap-3 justify-between items-center grow-0 shrink-0">
         <img src="/logo.png" alt="logo" width={40} height={40} />
-        <div>
+        <div className="hidden md:block">
           <h1 className="global-txt-color text-xl">{name}</h1>
         </div>
       </div>

web/src/components/Login/index.tsx

@@ -4,7 +4,7 @@ import { useGlobalContext } from "@/providers/GlobalProvider";
 import { userLogin } from "@/api/client";
 import { message } from "antd";
 import { setUserSession } from "@/utils/user";
-import { RiCloseFill } from 'react-icons/ri';
+import { RiCloseFill } from "react-icons/ri";
 
 export default function Login() {
   const { loginShow, changeLoginShow } = useGlobalContext();
@@ -46,13 +46,13 @@ export default function Login() {
       {loginShow && (
         <div className="login-box">
           <div className="login-mask"></div>
-          <div className="login-div dark:bg-gray-800">
+          <div className="login-div dark:bg-gray-800 w-11/12 md:w-128">
             <h4 className="text-2xl text-center dark:text-blue-50">登　录</h4>
             <ul className="flex justify-around mt-1 mb-3"></ul>
 
             <div className="login pt-2 h-92.5 rounded-lg bg-white dark:bg-gray-800 dark:opacity-75">
               <div>
-                <div className="mt-8 px-14">
+                <div className="mt-8 px-6">
                   <div className="flex items-center justify-between h-13 px-2.5 py-2 rounded bg-gray-100 dark:bg-gray-900">
                     <input
                       ref={inputRef_email}
@@ -65,7 +65,7 @@ export default function Login() {
                     />
                   </div>
                 </div>
-                <div className="mt-3 px-14">
+                <div className="mt-5 px-6">
                   <div className="flex items-center justify-between h-13 px-2.5 py-2 rounded bg-gray-100 dark:bg-gray-900">
                     <input
                       ref={inputRef_password}
@@ -80,21 +80,29 @@ export default function Login() {
                   <p className="h-5 mt-2 px-2.5 text-red-500"></p>
                 </div>
                 <div className="mt-4 text-center text-gray-400">
-                  <label className="text-gray-500 dark:text-gray-700">同意</label>
-                  <a href="/" className="text-gray-600 hover:text-[#0061ff] mx-1">
+                  <label className="text-gray-500 dark:text-gray-700">
+                    同意
+                  </label>
+                  <a
+                    href="/"
+                    className="text-gray-600 hover:text-[#0061ff] mx-1"
+                  >
                     用户协议
                   </a>
                   <label className="text-gray-500 dark:text-gray-700">和</label>
-                  <a href="/" className="text-gray-600 hover:text-[#0061ff] mx-1">
+                  <a
+                    href="/"
+                    className="text-gray-600 hover:text-[#0061ff] mx-1"
+                  >
                     隐私政策
                   </a>
                 </div>
-                <div className="mt-2 px-14">
+                <div className="mt-3 px-8">
                   <button
-                    className="block w-full h-12 rounded text-base text-white global-bg-color focus:outline-none focus:ring sm:mt-6 transition ease-in-out hover:-translate-y-1 hover:scale-110 duration-300"
+                    className="block w-full h-12 rounded text-base text-white global-bg-color focus:outline-none focus:ring sm:mt-6 transition ease-in-out hover:-translate-y-1 hover:scale-105 duration-300"
                     onClick={handleSubmit}
                   >
-                    登录
+                    登 录
                   </button>
                 </div>
               </div>

web/src/components/Menu/index.tsx

@@ -8,145 +8,162 @@ export default function Header() {
   const { menuIndex } = useGlobalContext();
 
   return (
-    <div className="relative h-full">
-      <div className="flex flex-col items-center space-4 select-none">
-        <div
-          className={`p-1 my-2 rounded-md text-center ${
-            menuIndex == 1
-              ? "bg-blue-50 dark:bg-blue-950 text-[#0061ff]"
-              : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800"
-          } cursor-pointer`}
-          onClick={() => router.push("/dialogue")}
-        >
-          <Image src="/icons/icon-talk.svg" alt="聊天" width={50} height={50} />
-          <p className="text-sm text-center py-1">对话</p>
-        </div>
-        <div
-          className={`p-1 my-2 rounded-md text-center ${
-            menuIndex == 2
-              ? "bg-blue-50 dark:bg-blue-950 text-[#0061ff]"
-              : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800"
-          } cursor-pointer`}
-          onClick={() => router.push("/")}
-        >
-          <Image src="/icons/icon-app.svg" alt="应用" width={50} height={50} />
-          <p className="text-sm text-center py-1">应用</p>
-        </div>
-        <div
-          className={`p-1 my-2 rounded-md text-center ${
-            menuIndex == 3
-              ? "bg-blue-50 dark:bg-blue-950 text-[#0061ff]"
-              : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800"
-          } cursor-pointer`}
-          onClick={() => router.push("/vip")}
-        >
-          <Image src="/icons/icon-vip.svg" alt="会员" width={50} height={50} />
-          <p className="text-sm text-center py-1">会员</p>
-        </div>
-        <div
-          className={`p-1 my-2 rounded-md text-center ${
-            menuIndex == 4
-              ? "bg-blue-50 dark:bg-blue-950 text-[#0061ff]"
-              : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800"
-          } cursor-pointer`}
-          onClick={() => router.push("/help")}
-        >
-          <Image
-            src="/icons/icon-question.svg"
-            alt="帮助"
-            width={50}
-            height={50}
-          />
-          <p className="text-sm text-center py-1">帮助</p>
-        </div>
-      </div>
-      <div className="flex flex-col items-center space-4 select-none inset-x-0 mt-20">
-        <div
-          className={`w-full my-2 py-3 rounded-md text-center text-gray-900 dark:text-gray-500 bg-gray-50 dark:bg-gray-800 border border-slate-200 dark:border-slate-700`}
-        >
-          <a href="https://gpts.gkscrm.com/" target="_blank">
+    <>
+      <div className="relative h-full">
+        <div className="flex flex-col items-center space-4 select-none">
+          <div
+            className={`p-1 my-2 rounded-md text-center ${
+              menuIndex == 1
+                ? "bg-blue-50 dark:bg-blue-950 text-[#0061ff]"
+                : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800"
+            } cursor-pointer`}
+            onClick={() => router.push("/dialogue")}
+          >
             <Image
-              src="/icons/a-1.svg"
-              alt="数字人"
-              width={40}
-              height={40}
-              className="mx-auto"
+              src="/icons/icon-talk.svg"
+              alt="聊天"
+              width={50}
+              height={50}
             />
-            <p className="text-sm text-center">数字人</p>
-          </a>
-        </div>
-        <div
-          className={`w-full my-2 py-3 rounded-md text-center text-gray-900 dark:text-gray-500 bg-gray-50 dark:bg-gray-800 border border-slate-200 dark:border-slate-700`}
-        >
-          <a href="https://gpts.gkscrm.com/" target="_blank">
+            <p className="text-sm text-center py-1">对话</p>
+          </div>
+          <div
+            className={`p-1 my-2 rounded-md text-center ${
+              menuIndex == 2
+                ? "bg-blue-50 dark:bg-blue-950 text-[#0061ff]"
+                : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800"
+            } cursor-pointer`}
+            onClick={() => router.push("/")}
+          >
             <Image
-              src="/icons/a-2.svg"
-              alt="课程入驻"
-              width={40}
-              height={40}
-              className="mx-auto"
-            />
-            <p className="text-sm text-center">课程入驻</p>
-          </a>
-        </div>
-        <div
-          className={`w-full my-2 py-3 rounded-md text-center text-gray-900 dark:text-gray-500 bg-gray-50 dark:bg-gray-800 border border-slate-200 dark:border-slate-700`}
-        >
-          <a href="https://gpts.gkscrm.com/" target="_blank">
-            <Image
-              src="/icons/a-3.svg"
-              alt="加入分销"
+              src="/icons/icon-app.svg"
+              alt="应用"
               width={50}
               height={50}
-              className="mx-auto"
             />
-            <p className="text-sm text-center">加入分销</p>
-          </a>
-        </div>
-        <div
-          className={`w-full my-2 py-3 rounded-md text-center text-gray-900 dark:text-gray-500 bg-gray-50 dark:bg-gray-800 border border-slate-200 dark:border-slate-700`}
-        >
-          <a href="https://gpts.gkscrm.com/" target="_blank">
+            <p className="text-sm text-center py-1">应用</p>
+          </div>
+          <div
+            className={`p-1 my-2 rounded-md text-center ${
+              menuIndex == 3
+                ? "bg-blue-50 dark:bg-blue-950 text-[#0061ff]"
+                : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800"
+            } cursor-pointer`}
+            onClick={() => router.push("/vip")}
+          >
             <Image
-              src="/icons/a-4.svg"
-              alt="小程序推广"
-              width={40}
-              height={40}
-              className="mx-auto"
+              src="/icons/icon-vip.svg"
+              alt="会员"
+              width={50}
+              height={50}
             />
-            <p className="text-sm text-center">小程序推广</p>
-          </a>
-        </div>
-        <div
-          className={`w-full my-2 py-3 rounded-md text-center text-gray-900 dark:text-gray-500 bg-gray-50 dark:bg-gray-800 border border-slate-200 dark:border-slate-700`}
-        >
-          <a href="https://gpts.gkscrm.com/" target="_blank">
+            <p className="text-sm text-center py-1">会员</p>
+          </div>
+          <div
+            className={`p-1 my-2 rounded-md text-center ${
+              menuIndex == 4
+                ? "bg-blue-50 dark:bg-blue-950 text-[#0061ff]"
+                : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800"
+            } cursor-pointer`}
+            onClick={() => router.push("/help")}
+          >
             <Image
-              src="/icons/a-5.svg"
-              alt="电商带货"
-              width={40}
-              height={40}
-              className="mx-auto"
+              src="/icons/icon-question.svg"
+              alt="帮助"
+              width={50}
+              height={50}
             />
-            <p className="text-sm text-center">电商带货</p>
-          </a>
+            <p className="text-sm text-center py-1">帮助</p>
+          </div>
         </div>
-        <div
-          className={`w-full my-2 py-3 rounded-md text-center text-gray-900 dark:text-gray-500 bg-gray-50 dark:bg-gray-800 border border-slate-200 dark:border-slate-700`}
-        >
-          <a href="https://gpts.gkscrm.com/" target="_blank">
-            <Image
-              src="/icons/a-6.svg"
-              alt="生财有道 - 副业圈子"
-              width={40}
-              height={40}
-              className="mx-auto"
-            />
-            <p className="text-sm text-center">生财有道</p>
-            <p className="text-sm text-center">副业圈子</p>
-          </a>
+        <div className="flex flex-col items-center space-4 select-none inset-x-0 mt-20">
+          <div
+            className={`w-full my-2 py-3 rounded-md text-center text-gray-900 dark:text-gray-500 bg-gray-50 dark:bg-gray-800 border border-slate-200 dark:border-slate-700`}
+          >
+            <a href="https://gpts.gkscrm.com/" target="_blank">
+              <Image
+                src="/icons/a-1.svg"
+                alt="数字人"
+                width={40}
+                height={40}
+                className="mx-auto"
+              />
+              <p className="text-sm text-center">数字人</p>
+            </a>
+          </div>
+          <div
+            className={`w-full my-2 py-3 rounded-md text-center text-gray-900 dark:text-gray-500 bg-gray-50 dark:bg-gray-800 border border-slate-200 dark:border-slate-700`}
+          >
+            <a href="https://gpts.gkscrm.com/" target="_blank">
+              <Image
+                src="/icons/a-2.svg"
+                alt="课程入驻"
+                width={40}
+                height={40}
+                className="mx-auto"
+              />
+              <p className="text-sm text-center">课程入驻</p>
+            </a>
+          </div>
+          <div
+            className={`w-full my-2 py-3 rounded-md text-center text-gray-900 dark:text-gray-500 bg-gray-50 dark:bg-gray-800 border border-slate-200 dark:border-slate-700`}
+          >
+            <a href="https://gpts.gkscrm.com/" target="_blank">
+              <Image
+                src="/icons/a-3.svg"
+                alt="加入分销"
+                width={50}
+                height={50}
+                className="mx-auto"
+              />
+              <p className="text-sm text-center">加入分销</p>
+            </a>
+          </div>
+          <div
+            className={`w-full my-2 py-3 rounded-md text-center text-gray-900 dark:text-gray-500 bg-gray-50 dark:bg-gray-800 border border-slate-200 dark:border-slate-700`}
+          >
+            <a href="https://gpts.gkscrm.com/" target="_blank">
+              <Image
+                src="/icons/a-4.svg"
+                alt="小程序推广"
+                width={40}
+                height={40}
+                className="mx-auto"
+              />
+              <p className="text-sm text-center">小程序推广</p>
+            </a>
+          </div>
+          <div
+            className={`w-full my-2 py-3 rounded-md text-center text-gray-900 dark:text-gray-500 bg-gray-50 dark:bg-gray-800 border border-slate-200 dark:border-slate-700`}
+          >
+            <a href="https://gpts.gkscrm.com/" target="_blank">
+              <Image
+                src="/icons/a-5.svg"
+                alt="电商带货"
+                width={40}
+                height={40}
+                className="mx-auto"
+              />
+              <p className="text-sm text-center">电商带货</p>
+            </a>
+          </div>
+          <div
+            className={`w-full my-2 py-3 rounded-md text-center text-gray-900 dark:text-gray-500 bg-gray-50 dark:bg-gray-800 border border-slate-200 dark:border-slate-700`}
+          >
+            <a href="https://gpts.gkscrm.com/" target="_blank">
+              <Image
+                src="/icons/a-6.svg"
+                alt="生财有道 - 副业圈子"
+                width={40}
+                height={40}
+                className="mx-auto"
+              />
+              <p className="text-sm text-center">生财有道</p>
+              <p className="text-sm text-center">副业圈子</p>
+            </a>
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }

web/src/components/Menu_H5/index.tsx

@@ -0,0 +1,54 @@
+"use client";
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import { useGlobalContext } from "@/providers/GlobalProvider";
+
+export default function Header() {
+  const router = useRouter();
+  const { menuIndex } = useGlobalContext();
+
+  return (
+    <>
+      <div className="fixed bottom-0 left-0 right-0 py-1 bg-[#ffffff] dark:bg-[#202123] shadow-2xl shadow-black z-50">
+        <div className="flex justify-around items-center py-1 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 text-center text-sm">
+          <a className={menuIndex == 1 ? "bg-blue-50 dark:bg-blue-950 text-[#0061ff] rounded px-3":"px-3"} onClick={() => router.push("/dialogue")}>
+            <Image
+              src="/icons/icon-talk.svg"
+              alt="聊天"
+              width={28}
+              height={28}
+            />
+            <p className="text-sm text-center py-1">对话</p>
+          </a>
+          <a className={menuIndex == 2 ? "bg-blue-50 dark:bg-blue-950 text-[#0061ff] rounded px-3":"px-3"} onClick={() => router.push("/")}>
+            <Image
+              src="/icons/icon-app.svg"
+              alt="应用"
+              width={28}
+              height={28}
+            />
+            <p className="text-sm text-center py-1">应用</p>
+          </a>
+          <a className={menuIndex == 3 ? "bg-blue-50 dark:bg-blue-950 text-[#0061ff] rounded px-3":"px-3"} onClick={() => router.push("/vip")}>
+            <Image
+              src="/icons/icon-vip.svg"
+              alt="会员"
+              width={28}
+              height={28}
+            />
+            <p className="text-sm text-center py-1">会员</p>
+          </a>
+          <a className={menuIndex == 4 ? "bg-blue-50 dark:bg-blue-950 text-[#0061ff] rounded px-3":"px-3"} onClick={() => router.push("/help")}>
+            <Image
+              src="/icons/icon-question.svg"
+              alt="帮助"
+              width={28}
+              height={28}
+            />
+            <p className="text-sm text-center py-1">帮助</p>
+          </a>
+        </div>
+      </div>
+    </>
+  );
+}

web/src/providers/ThemeProvider.tsx

@@ -1,8 +1,10 @@
+import React from 'react';
 import { NextUIProvider } from "@nextui-org/react";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
 import FullLoading from "@/components/FullLoading"; // 全局 Loading
 import Header from "@/components/Header"; // 头部布局
 import Menu from "@/components/Menu"; // 菜单
+import H5Menu from "@/components/Menu_H5"; // 菜单
 import Login from "@/components/Login";
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
@@ -14,30 +16,23 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
           defaultTheme={process.env.DEFAULT_THEME}
         >
           <FullLoading />
-          <Header name={process.env.SITE_TITLE || "AI智能体广场"} />
-          <div
-            className="flex justify-between items-center bg-slate-200 dark:bg-[#000]"
-            style={{ height: "calc(100vh - 3.5rem)" }}
-          >
-            <div
-              className="shadow-md mx-2 bg-[#ffffff] dark:bg-[#202123] rounded-md p-2  overflow-auto scroll-smooth"
-              style={{ height: "calc(100vh - 5rem)", width: "7rem" }}
-            >
-              <Menu/>
-            </div>
-            <div
-              className="relative shadow-md mr-2 bg-[#ffffff] dark:bg-[#202123] rounded-md overflow-auto scroll-smooth"
-              style={{
-                height: "calc(100vh - 5rem)",
-                width: "calc(100% - 7rem)",
-              }}
-            >
-              <main>{children}</main>
+          <div className="h-screen w-full flex flex-col">
+            <Header name={process.env.SITE_TITLE || "AI智能体广场"} />
+            <div className="flex justify-between items-center bg-slate-200 dark:bg-[#000] md:py-3">
+              <div className="shadow-md mx-2 bg-[#ffffff] dark:bg-[#202123] rounded-md p-2  overflow-auto scroll-smooth hidden md:block w-28 h-calc-5"  >
+                <Menu />
+              </div>
+              <div className="block md:hidden">
+                <H5Menu />
+              </div>
+                <div className="relative shadow-md md:mr-2 bg-[#ffffff] dark:bg-[#202123] md:rounded-md overflow-auto scroll-smooth w-full grow h-calc-8 md:h-calc-5">
+                <main>{children}</main>
+                </div>
             </div>
           </div>
         </NextThemesProvider>
       </NextUIProvider>
-      <Login/>
+      <Login />
     </>
   );
 }

web/tailwind.config.ts

@@ -68,6 +68,19 @@ const config = {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
+      width:{
+        '128': '32rem',
+      },
+      minWidth:{
+        '1024px': '1024px',
+      },
+      height:{
+        'calc-5':'calc(100vh - 5rem)',
+        'calc-8':'calc(100vh - 8rem)',
+        'calc-9':'calc(100vh - 9rem)',
+        'calc-10':'calc(100vh - 10rem)',
+        'calc-13':'calc(100vh - 13rem)',
+      }
     },
   },
   plugins: [require('@tailwindcss/typography'),nextui()],