feat:init

.gitignore

@@ -11,6 +11,9 @@ node_modules
 dist
 dist-ssr
 *.local
+public/video/*
+public/words/*
+public/audio/*
 
 # Editor directories and files
 .vscode/*

.storybook/main.ts

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+import { mergeConfig } from "vite";
+import path from "path";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          "@": path.resolve(__dirname, "../src"),
+        },
+      },
+    });
+  },
+};
+
+export default config;
+

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from "@storybook/react";
+import "../src/index.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;
+

index.html

@@ -3,8 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>南湖名师/技能大师工作室</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
+    />
+    <meta name="referrer" content="no-referrer" />
+    <title>沪上又见故人来</title>
   </head>
   <body>
     <div id="root"></div>

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "master-teacher-studio",
+  "name": "shanghai-residences",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -13,20 +13,31 @@
     "build": "tsc && vite build",
     "lint": "eslint .",
     "typecheck": "tsc --noEmit",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "axios": "^1.12.2",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.23.26",
     "lucide-react": "^0.545.0",
     "mammoth": "^1.11.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-router-dom": "^7.9.4",
+    "tailwind-merge": "^3.4.0",
+    "vconsole": "^3.15.1",
     "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
     "@tailwindcss/postcss": "^4.1.14",
     "@types/node": "^24.8.0",
     "@types/react": "^19.1.16",
@@ -35,11 +46,13 @@
     "@typescript-eslint/parser": "^8.46.1",
     "@vitejs/plugin-react": "^5.0.4",
     "autoprefixer": "^10.4.21",
+    "baseline-browser-mapping": "^2.9.6",
     "eslint": "^9.36.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.22",
     "globals": "^16.4.0",
     "postcss": "^8.5.6",
+    "storybook": "^8.4.7",
     "tailwindcss": "^4.1.14",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.46.1",

src/App.tsx

@@ -1,28 +1,43 @@
 import { RouterProvider } from "react-router-dom";
+import { Suspense } from "react";
 import router from "./router";
-import { usePageScale } from "./hooks/usePageScale";
-import { ScaleProvider } from "./contexts/ScaleContext";
+import { ScaleProvider, useScale } from "./contexts/ScaleContext";
+import { RotateHint } from "./components/RotateHint";
 
-function App() {
-  const { scaleStyle, scale, offsetX, offsetY, DESIGN_WIDTH, DESIGN_HEIGHT } =
-    usePageScale();
+/**
+ * 应用内容组件
+ * 使用 useScale 获取缩放样式
+ */
+function AppContent() {
+  const { scaleStyle } = useScale();
 
   return (
-    <ScaleProvider
-      value={{ scale, offsetX, offsetY, DESIGN_WIDTH, DESIGN_HEIGHT }}
-    >
-      <div
-        style={{
-          position: "relative",
-          width: "100vw",
-          height: "100vh",
-          overflow: "hidden",
-        }}
-      >
-        <div style={scaleStyle}>
-          <RouterProvider router={router} />
+    <>
+      <div className="relative w-screen h-screen overflow-hidden">
+        <div
+          style={{
+            ...scaleStyle,
+            overflow: "hidden",
+          }}
+        >
+          <Suspense fallback={<div>Loading...</div>}>
+            <RouterProvider router={router} />
+          </Suspense>
         </div>
       </div>
+      <RotateHint />
+    </>
+  );
+}
+
+/**
+ * 应用根组件
+ * ScaleProvider 自动处理所有缩放逻辑
+ */
+function App() {
+  return (
+    <ScaleProvider>
+      <AppContent />
     </ScaleProvider>
   );
 }