使用React js完成web前端

chusql-web/frontend/src/components/common/auth.module.css

@@ -0,0 +1,11 @@
+/* 登录页样式：居中卡片与表单控件。 */
+.center { align-items: center; background: var(--bg-base); display: flex; height: 100%; justify-content: center; }
+.center > p { color: var(--fg-muted); }
+.login { background: var(--bg-elevated); border: 1px solid var(--border); display: grid; gap: 12px; padding: 18px; width: 320px; }
+.login header { align-items: center; display: flex; gap: 8px; }
+.login h1 { font-size: 14px; margin: 0; }
+.login label { display: grid; gap: 5px; }
+.login label span { color: var(--fg-muted); font-size: 11px; }
+.login input { background: var(--bg-base); border: 1px solid var(--border); color: var(--fg-primary); height: 24px; padding: 0 6px; }
+.login p { color: var(--danger); margin: 0; }
+.login button { background: var(--accent-2); border: 1px solid var(--accent); color: #fff; height: 26px; }