Просмотр исходного кода

style: dashboard-v6 未登录页参照 v4 布局

- anonymous 布局:顶栏加语言选择,底色改为 v4 的 #3e3e3e 并铺满全屏,
  表单左侧加 wikipali logo(宽 20em,窄屏换行到上方),页脚放备案号,
  去掉占位文字
- 登录 / 注册 / 邀请注册 / 找回密码 / 重设密码:卡片统一 400px(注册 760px,
  窄屏收缩),底部链接前统一加 Divider

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
visuddhinanda 1 неделя назад
Родитель
Сommit
0ea5564a32

+ 69 - 11
dashboard-v6/src/layouts/anonymous/index.tsx

@@ -1,19 +1,77 @@
-import { Outlet } from "react-router";
+import { ConfigProvider, theme } from "antd";
+import { Link, Outlet } from "react-router";
 
-import Footer from "../Footer";
+import UiLangSelect from "../../components/general/UiLangSelect";
+import BeiAn from "../../components/general/BeiAn";
+import img_logo from "../../assets/general/images/wikipali_logo.svg";
+
+/**
+ * 未登录页(登录 / 注册 / 找回密码)的外壳,布局参照 dashboard-v4 的 layouts/anonymous。
+ *
+ * logo 是白字 + 黄色图形,只能放在深色底上,所以底色固定为 v4 的 #3e3e3e,
+ * 不跟随主题切换;顶栏与页脚套暗色算法,文字才看得清。
+ * 中间的表单卡片仍跟随用户的主题。
+ */
+const BACKGROUND = "#3e3e3e";
 
 const Widget = () => {
-  // TODO
   return (
-    <div>
-      <div>anonymous header</div>
-      <div>
-        <Outlet />
-      </div>
-      <div>
-        anonymous layout footer
-        <Footer />
+    <div
+      style={{
+        minHeight: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: BACKGROUND,
+      }}
+    >
+      <ConfigProvider theme={{ algorithm: theme.darkAlgorithm }}>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "flex-end",
+            padding: "4px 16px",
+          }}
+        >
+          <UiLangSelect />
+        </div>
+      </ConfigProvider>
+
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          flexWrap: "wrap",
+          justifyContent: "center",
+          alignItems: "flex-start",
+          gap: 32,
+          padding: "3em 16px 120px",
+        }}
+      >
+        <div style={{ flex: "0 1 400px", padding: "1em 0" }}>
+          <Link to="/">
+            <img
+              alt="wikipali"
+              src={img_logo}
+              style={{ width: "20em", maxWidth: "100%" }}
+            />
+          </Link>
+        </div>
+        <div style={{ flex: "0 1 auto", maxWidth: "100%" }}>
+          <Outlet />
+        </div>
       </div>
+
+      <ConfigProvider theme={{ algorithm: theme.darkAlgorithm }}>
+        <div
+          style={{
+            padding: "16px",
+            textAlign: "center",
+            color: "rgba(255, 255, 255, 0.65)",
+          }}
+        >
+          <BeiAn />
+        </div>
+      </ConfigProvider>
     </div>
   );
 };

+ 1 - 0
dashboard-v6/src/pages/users/forgot-password.tsx

@@ -14,6 +14,7 @@ const Widget = () => {
         title={intl.formatMessage({
           id: "buttons.forgot.password",
         })}
+        style={{ width: 400, maxWidth: "100%" }}
       >
         <ForgotPassword />
         <Divider />

+ 1 - 0
dashboard-v6/src/pages/users/reset-password.tsx

@@ -15,6 +15,7 @@ const Widget = () => {
         title={intl.formatMessage({
           id: "buttons.reset.password",
         })}
+        style={{ width: 400, maxWidth: "100%" }}
       >
         <ResetPassword token={token} />
         <Divider />

+ 7 - 7
dashboard-v6/src/pages/users/sign-in.tsx

@@ -1,24 +1,24 @@
 import SignInForm from "../../components/users/SignIn";
 import SharedLinks from "../../components/users/NonSignInSharedLinks";
-import { Card, Space } from "antd";
+import { Card, Divider } from "antd";
 import { useIntl } from "react-intl";
 
 const Widget = () => {
   const intl = useIntl();
   return (
-    <div>
+    <>
       <title>{intl.formatMessage({ id: "nut.users.sign-in.title" })}</title>
       <Card
         title={intl.formatMessage({
           id: "nut.users.sign-in.title",
         })}
+        style={{ width: 400, maxWidth: "100%" }}
       >
-        <Space orientation="vertical">
-          <SignInForm />
-          <SharedLinks />
-        </Space>
+        <SignInForm />
+        <Divider />
+        <SharedLinks />
       </Card>
-    </div>
+    </>
   );
 };
 

+ 3 - 1
dashboard-v6/src/pages/users/sign-up-invite.tsx

@@ -1,4 +1,4 @@
-import { Card } from "antd";
+import { Card, Divider } from "antd";
 import { useIntl } from "react-intl";
 import { useParams } from "react-router";
 import SharedLinks from "../../components/users/NonSignInSharedLinks";
@@ -15,8 +15,10 @@ const Widget = () => {
         title={intl.formatMessage({
           id: "buttons.sign-up",
         })}
+        style={{ width: 400, maxWidth: "100%" }}
       >
         <InviteSignUp token={token} />
+        <Divider />
         <SharedLinks />
       </Card>
     </>

+ 3 - 1
dashboard-v6/src/pages/users/sign-up.tsx

@@ -1,4 +1,4 @@
-import { Card } from "antd";
+import { Card, Divider } from "antd";
 import { useIntl } from "react-intl";
 import SharedLinks from "../../components/users/NonSignInSharedLinks";
 import SelfSignUp from "../../components/users/SelfSignUp";
@@ -13,8 +13,10 @@ const Widget = () => {
         title={intl.formatMessage({
           id: "buttons.sign-up",
         })}
+        style={{ width: 760, maxWidth: "100%" }}
       >
         <SelfSignUp />
+        <Divider />
         <SharedLinks />
       </Card>
     </>