style(layout): 适配移动端底部导航外壳

6 days ago · b20d8ab7db
5 changed files with 1595 additions and 1344 deletions
--- a/index.html
+++ b/index.html
@ -1,27 +1,23 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
- <head>
-  <meta charset="utf-8">
-  <title>POPi.art | AI动画制作平台 · 角色生成 · AI分镜（故事板）</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <!-- 禁止缓存入口页，部署后用户普通刷新即可拿到最新版本 -->
-  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-  <meta http-equiv="Pragma" content="no-cache">
-  <meta http-equiv="Expires" content="0">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <meta name="description"
-    content="Popi.art（也常被写作 Popi / Popiart / popi.art）是一站式 AI 动画创作平台，支持角色生成、AI 分镜（故事板）、脚本分镜到动画短片成片的工作流，让每个人都能做动画。" />
-  <meta name="keywords"
-    content="popi, popi.art, popiart, Popi AI, AI动画, AI动画制作平台, AI动画生成器, 角色生成, AI角色生成, AI角色设计, 角色三视图, AI分镜, AI故事板, storyboard, 分镜表生成, 动画短片制作, 虚拟IP, LoRA训练" />
-  <meta name="viewport" content="width=1280, user-scalable=no">
-  <!-- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> -->
-  <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
-  <!-- <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> -->
-</head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
-
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <title>POPi.art | AI动画制作平台 · 角色生成 · AI分镜（故事板）</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- 禁止缓存入口页，部署后用户普通刷新即可拿到最新版本 -->
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <meta name="description" content="Popi.art（也常被写作 Popi / Popiart / popi.art）是一站式 AI 动画创作平台，支持角色生成、AI 分镜（故事板）、脚本分镜到动画短片成片的工作流，让每个人都能做动画。" />
+    <meta name="keywords" content="popi, popi.art, popiart, Popi AI, AI动画, AI动画制作平台, AI动画生成器, 角色生成, AI角色生成, AI角色设计, 角色三视图, AI分镜, AI故事板, storyboard, 分镜表生成, 动画短片制作, 虚拟IP, LoRA训练" />
+    <!-- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> -->
+    <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
+    <!-- <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> -->
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@ -9,12 +9,6 @@ export { useTaskListPolling } from "./useTaskListPolling";
 export type { UseTaskListPollingOptions } from "./useTaskListPolling";
 export { usePaginatedList } from "./usePaginatedList";
 export type { PaginatedListFetchOptions, PaginatedListFetchResult, UsePaginatedListOptions, UsePaginatedListResult } from "./usePaginatedList";
-export {
-  getTaskRecordId,
-  getTaskRecordStatus,
-  isTaskFailureStatus,
-  isTaskRechargeFailure,
-  notifyTaskFailure,
-  toTaskString,
-} from "./taskFailure";
+export { MOBILE_MAIN_MEDIA_QUERY, useIsMobile } from "./useIsMobile";
+export { getTaskRecordId, getTaskRecordStatus, isTaskFailureStatus, isTaskRechargeFailure, notifyTaskFailure, toTaskString } from "./taskFailure";
 export type { TaskFailureResult, TaskRecord } from "./taskFailure";
--- a/src/hooks/useIsMobile.ts
+++ b/src/hooks/useIsMobile.ts
@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+export const MOBILE_MAIN_MEDIA_QUERY = "(max-width: 900px)";
+
+function getIsMobile(): boolean {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+
+  return window.matchMedia(MOBILE_MAIN_MEDIA_QUERY).matches;
+}
+
+export function useIsMobile(): boolean {
+  const [isMobile, setIsMobile] = useState(getIsMobile);
+
+  useEffect(() => {
+    const mediaQueryList = window.matchMedia(MOBILE_MAIN_MEDIA_QUERY);
+    const sync = () => {
+      setIsMobile(mediaQueryList.matches);
+    };
+
+    sync();
+    mediaQueryList.addEventListener("change", sync);
+
+    return () => {
+      mediaQueryList.removeEventListener("change", sync);
+    };
+  }, []);
+
+  return isMobile;
+}
--- a/src/index.css
+++ b/src/index.css
@ -5,10 +5,33 @@
@import "./assets/iconfont/iconfont.css";

 * {
+  min-width: 0;
+  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #f0f0f0 transparent;
 }

+html,
+body {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+body {
+  min-width: 0;
+}
+
+img,
+video {
+  max-width: 100%;
+}
+
+@media (max-width: 900px) {
+  body {
+    font-size: 14px;
+  }
+}
+
 *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
--- a/src/layouts/Layout/Layout.scss
+++ b/src/layouts/Layout/Layout.scss