refactor: relocate components to app directory structure

src/app/_components/core/mobile-shell.tsx

@@ -0,0 +1,37 @@
+"use client";
+/**
+ * 500px 移动端 Shell
+ *
+ * 原始 Dart: 每个屏幕的 `Scaffold → SafeArea → Center → ConstrainedBox(maxWidth: 500)` 模式
+ * （`Breakpoints.mobileMaxWidth = 500.0`）。
+ *
+ * 集中封装，调用方仅需 `<MobileShell>{...}</MobileShell>` 即可获得统一的移动端宽度约束。
+ */
+import type { ReactNode } from "react";
+
+import styles from "./mobile-shell.module.css";
+
+export interface MobileShellProps {
+  children: ReactNode;
+  /** 自定义背景色（默认透明，继承 body 背景）。 */
+  background?: string;
+  /** 自定义 className（注入到内容容器上）。 */
+  className?: string;
+}
+
+export function MobileShell({
+  children,
+  background,
+  className,
+}: MobileShellProps) {
+  return (
+    <div className={styles.shell}>
+      <div
+        className={[styles.content, className].filter(Boolean).join(" ")}
+        style={background ? { background } : undefined}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}