refactor: 企业级目录重构与播放/关于页体验升级

- 按 app / shared / entities / features 分层，路由懒加载并抽出布局组件 - 请求层改为可插拔拦截器，统一错误类型、超时取消与端点拆分 - 抽取播放器、骨架屏、网格等复用组件，点赞收藏接入统一交互反馈 - 关于页重做为无边框极光风格，补充 iOS / Google Play 下载入口 - 修复播放页滚轮切集吞事件、页面误滚动、后台持续播放与声音记忆问题 - 语言按本地偏好与 IP 识别，国旗改为内联 SVG - 清理未使用的旧站点文件，补充 ESLint 配置
2026-11-12 12:32:29 +08:00
1 parent 8dd5283892
commit ecfbd3b8b5
@@ -1,13 +1,14 @@
 // Author: fruit.com.cn
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import { StoreProvider } from './store';
-import { AppShell } from '../layouts/AppShell';
-import { HomePage } from '../pages/HomePage';
-import { ListingPage } from '../pages/ListingPage';
-import { SearchPage } from '../pages/SearchPage';
-import { WatchPage } from '../pages/WatchPage';
-import { ShortsFeedPage } from '../pages/ShortsFeedPage';
-import { HistoryPage } from '../pages/HistoryPage';
-import { AboutPage } from '../pages/AboutPage';
+import { BrowserRouter } from 'react-router-dom';
+import { AppProviders } from './providers/AppProviders';
+import { AppRouter } from './router';

-export function App() { return <BrowserRouter><StoreProvider><Routes><Route element={<AppShell />}><Route path="/" element={<HomePage />} /><Route path="/shorts" element={<ShortsFeedPage />} /><Route path="/subscriptions" element={<ListingPage type="subscriptions" />} /><Route path="/library" element={<ListingPage type="library" />} /><Route path="/history" element={<HistoryPage />} /><Route path="/about" element={<AboutPage />} /><Route path="/search" element={<SearchPage />} /><Route path="/watch/:id" element={<WatchPage />} /></Route></Routes></StoreProvider></BrowserRouter>; }
+export function App() {
+  return (
+    <BrowserRouter>
+      <AppProviders>
+        <AppRouter />
+      </AppProviders>
+    </BrowserRouter>
+  );
+}
@@ -0,0 +1,90 @@
+// Author: fruit.com.cn
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { getLocale } from '../../i18n';
+import { detectLocaleFromIp } from '../../shared/lib/geo';
+import { applySeo } from '../../shared/lib/seo';
+
+const LocaleContext = createContext(null);
+const UiContext = createContext(null);
+const LANG_STORAGE_KEY = 'ymb.lang';
+const SUPPORTED_LANGS = ['id', 'en', 'zh'];
+
+function readUrlLang() {
+  const value = new URLSearchParams(window.location.search).get('lang');
+  return SUPPORTED_LANGS.includes(value) ? value : '';
+}
+
+function readStoredLang() {
+  try {
+    const value = window.localStorage.getItem(LANG_STORAGE_KEY);
+    return SUPPORTED_LANGS.includes(value) ? value : '';
+  } catch {
+    return '';
+  }
+}
+
+function readNavigatorLang() {
+  const code = (navigator.language || '').toLowerCase();
+  if (code.startsWith('id')) return 'id';
+  if (code.startsWith('zh')) return 'zh';
+  return 'en';
+}
+
+function detectInitialLang() {
+  return readUrlLang() || readStoredLang() || readNavigatorLang();
+}
+
+export function AppProviders({ children }) {
+  const [lang, setLangState] = useState(detectInitialLang);
+  const [query, setQuery] = useState('');
+  const [sidebarOpen, setSidebarOpen] = useState(() => window.innerWidth > 760);
+  const userSelectedRef = useRef(false);
+  const locale = getLocale(lang);
+
+  // 首次进入且没有明确偏好时，按 IP 归属地自动匹配语言
+  useEffect(() => {
+    if (readUrlLang() || readStoredLang()) return undefined;
+    let active = true;
+    detectLocaleFromIp().then((detected) => {
+      if (active && detected && !userSelectedRef.current) setLangState(detected);
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const setLang = useCallback((next) => {
+    userSelectedRef.current = true;
+    setLangState(next);
+    try {
+      window.localStorage.setItem(LANG_STORAGE_KEY, next);
+    } catch {
+      // 隐私模式下写入失败时仍保证本次会话生效
+    }
+  }, []);
+
+  useEffect(() => {
+    applySeo(locale, window.location.pathname);
+  }, [lang, locale]);
+
+  const localeValue = useMemo(() => ({ lang, locale, setLang }), [lang, locale, setLang]);
+  const uiValue = useMemo(() => ({ query, setQuery, sidebarOpen, setSidebarOpen }), [query, sidebarOpen]);
+
+  return (
+    <LocaleContext.Provider value={localeValue}>
+      <UiContext.Provider value={uiValue}>{children}</UiContext.Provider>
+    </LocaleContext.Provider>
+  );
+}
+
+export function useLocale() {
+  const value = useContext(LocaleContext);
+  if (!value) throw new Error('useLocale must be used within AppProviders');
+  return value;
+}
+
+export function useUi() {
+  const value = useContext(UiContext);
+  if (!value) throw new Error('useUi must be used within AppProviders');
+  return value;
+}
@@ -0,0 +1,29 @@
+// Author: fruit.com.cn
+import { lazy } from 'react';
+import { Route, Routes } from 'react-router-dom';
+import { AppShell } from '../layouts/AppShell';
+
+const HomePage = lazy(() => import('../features/home/HomePage').then((module) => ({ default: module.HomePage })));
+const ShortsFeedPage = lazy(() => import('../features/shorts/ShortsFeedPage').then((module) => ({ default: module.ShortsFeedPage })));
+const WatchPage = lazy(() => import('../features/watch/WatchPage').then((module) => ({ default: module.WatchPage })));
+const SearchPage = lazy(() => import('../features/search/SearchPage').then((module) => ({ default: module.SearchPage })));
+const HistoryPage = lazy(() => import('../features/history/HistoryPage').then((module) => ({ default: module.HistoryPage })));
+const ListingPage = lazy(() => import('../features/listing/ListingPage').then((module) => ({ default: module.ListingPage })));
+const AboutPage = lazy(() => import('../features/about/AboutPage').then((module) => ({ default: module.AboutPage })));
+
+export function AppRouter() {
+  return (
+    <Routes>
+      <Route element={<AppShell />}>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/shorts" element={<ShortsFeedPage />} />
+        <Route path="/subscriptions" element={<ListingPage type="subscriptions" />} />
+        <Route path="/library" element={<ListingPage type="library" />} />
+        <Route path="/history" element={<HistoryPage />} />
+        <Route path="/about" element={<AboutPage />} />
+        <Route path="/search" element={<SearchPage />} />
+        <Route path="/watch/:id" element={<WatchPage />} />
+      </Route>
+    </Routes>
+  );
+}
@@ -1,9 +0,0 @@
-// Author: fruit.com.cn
-import { createContext, useContext, useMemo, useState } from 'react';
-import { getLocale } from '../i18n';
-import { applySeo } from '../lib/seo';
-import { useEffect } from 'react';
-
-const StoreContext = createContext(null);
-export function StoreProvider({ children }) { const initial = new URLSearchParams(location.search).get('lang'); const [lang, setLangState] = useState(initial || 'id'); const [query, setQuery] = useState(''); const [sidebarOpen, setSidebarOpen] = useState(() => window.innerWidth > 760); const setLang = (next) => { setLangState(next); const url = new URL(location.href); url.searchParams.set('lang', next); history.replaceState(null, '', url); }; const locale = getLocale(lang); useEffect(() => applySeo(locale, location.pathname), [lang, locale]); const value = useMemo(() => ({ lang, locale, setLang, query, setQuery, sidebarOpen, setSidebarOpen }), [lang, locale, query, sidebarOpen]); return <StoreContext.Provider value={value}>{children}</StoreContext.Provider>; }
-export function useAppStore() { return useContext(StoreContext); }