feat(web): 搭建应用骨架并完善开发环境配置

2026-09-02 22:42:21 +08:00
parent 09e5207c83
commit 403f6cfa27
43 changed files with 2056 additions and 2356 deletions
@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import type { ReactNode } from 'react';
+import './AuthLayout.css';
+
+interface AuthLayoutProps {
+  /** 页面标题，如「登录」 */
+  title: string;
+  /** 标题下的一行说明 */
+  subtitle: string;
+  /** 卡片底部的切换入口 */
+  footer: ReactNode;
+  children: ReactNode;
+}
+
+/** 注册/登录共用的居中卡片布局，品牌视觉与 MainLayout 一致 */
+const AuthLayout = ({ title, subtitle, footer, children }: AuthLayoutProps) => {
+  useEffect(() => {
+    document.title = `${title} - Atlas Seller Kit`;
+  }, [title]);
+
+  return (
+    <div className="auth-page">
+      <div className="auth-panel">
+        <div className="auth-brand">
+          <div className="auth-logo">Atlas Kit</div>
+          <div className="auth-logo-subtitle">商品工作台</div>
+        </div>
+        <div className="auth-card">
+          <div className="auth-title">{title}</div>
+          <div className="auth-subtitle">{subtitle}</div>
+          {children}
+          <div className="auth-footer">{footer}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AuthLayout;