@lobehub/lobehub 2.0.0-next.19 → 2.0.0-next.20

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 2.0.0-next.20](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.19...v2.0.0-next.20)
+
+<sup>Released on **2025-11-03**</sup>
+
+#### 💄 Styles
+
+- **misc**: Improve oidc layout style.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Improve oidc layout style, closes [#10023](https://github.com/lobehub/lobe-chat/issues/10023) ([5008be7](https://github.com/lobehub/lobe-chat/commit/5008be7))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.19](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.18...v2.0.0-next.19)
 
 <sup>Released on **2025-11-03**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Improve oidc layout style."
+      ]
+    },
+    "date": "2025-11-03",
+    "version": "2.0.0-next.20"
+  },
   {
     "children": {
       "improvements": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.19",
+  "version": "2.0.0-next.20",
   "description": "LobeHub - an open-source,comprehensive AI Agent framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/[variants]/oauth/ResultLayout.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { Card } from 'antd';
+import { createStyles } from 'antd-style';
+import { type ReactNode, memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+interface ResultLayoutProps {
+  children: ReactNode;
+}
+
+const useStyles = createStyles(({ css, responsive }) => ({
+  card: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    min-width: 500px;
+    min-height: 280px;
+
+    ${responsive.mobile} {
+      min-width: auto;
+    }
+  `,
+  container: css`
+    ${responsive.mobile} {
+      justify-content: flex-start;
+      width: 100%;
+      padding-block-start: 64px;
+    }
+  `,
+}));
+
+const ResultLayout = memo<ResultLayoutProps>(({ children }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Center className={styles.container} height="100vh" paddingBlock={24} paddingInline={12}>
+      <Card className={styles.card}>{children}</Card>
+    </Center>
+  );
+});
+
+ResultLayout.displayName = 'ResultLayout';
+
+export default ResultLayout;

package/src/app/[variants]/oauth/callback/error/page.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import { Button, Highlighter, Icon } from '@lobehub/ui';
-import { Card, Result } from 'antd';
+import { Result } from 'antd';
 import { ShieldX } from 'lucide-react';
 import Link from 'next/link';
 import { parseAsString, useQueryState } from 'nuqs';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
+import { Flexbox } from 'react-layout-kit';
 
 const FailedPage = memo(() => {
   const { t } = useTranslation('oauth');
@@ -15,38 +15,25 @@ const FailedPage = memo(() => {
   const [errorMessage] = useQueryState<string>('errorMessage', parseAsString);
 
   return (
-    <Center height="100vh">
-      <Card
-        style={{
-          alignItems: 'center',
-          display: 'flex',
-          justifyContent: 'center',
-          minHeight: 280,
-          minWidth: 500,
-          width: '100%',
-        }}
-      >
-        <Result
-          extra={
-            <Link href="/">
-              <Button type="primary">{t('error.backToHome')}</Button>
-            </Link>
-          }
-          icon={<Icon icon={ShieldX} />}
-          status="error"
-          subTitle={
-            <Flexbox gap={8}>
-              {t('error.desc', {
-                reason: t(`error.reason.${reason}` as any, { defaultValue: reason }),
-              })}
+    <Result
+      extra={
+        <Link href="/">
+          <Button type="primary">{t('error.backToHome')}</Button>
+        </Link>
+      }
+      icon={<Icon icon={ShieldX} />}
+      status="error"
+      subTitle={
+        <Flexbox gap={8}>
+          {t('error.desc', {
+            reason: t(`error.reason.${reason}` as any, { defaultValue: reason }),
+          })}
 
-              {!!errorMessage && <Highlighter language={'log'}>{errorMessage}</Highlighter>}
-            </Flexbox>
-          }
-          title={t('error.title')}
-        />
-      </Card>
-    </Center>
+          {!!errorMessage && <Highlighter language={'log'}>{errorMessage}</Highlighter>}
+        </Flexbox>
+      }
+      title={t('error.title')}
+    />
   );
 });
 

package/src/app/[variants]/oauth/callback/layout.tsx

@@ -0,0 +1 @@
+export { default } from '../ResultLayout';

package/src/app/[variants]/oauth/callback/success/page.tsx

@@ -1,36 +1,22 @@
 'use client';
 
 import { Icon } from '@lobehub/ui';
-import { Card, Result } from 'antd';
+import { Result } from 'antd';
 import { CheckCircle } from 'lucide-react';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Center } from 'react-layout-kit';
 
 const SuccessPage = memo(() => {
   const { t } = useTranslation('oauth');
 
   return (
-    <Center height="100vh">
-      <Card
-        style={{
-          alignItems: 'center',
-          display: 'flex',
-          justifyContent: 'center',
-          minHeight: 280,
-          minWidth: 500,
-          width: '100%',
-        }}
-      >
-        <Result
-          icon={<Icon icon={CheckCircle} />}
-          status="success"
-          style={{ padding: 0 }}
-          subTitle={t('success.subTitle')}
-          title={t('success.title')}
-        />
-      </Card>
-    </Center>
+    <Result
+      icon={<Icon icon={CheckCircle} />}
+      status="success"
+      style={{ padding: 0 }}
+      subTitle={t('success.subTitle')}
+      title={t('success.title')}
+    />
   );
 });
 

package/src/app/[variants]/oauth/consent/[uid]/Consent/BuiltinConsent.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import { Icon } from '@lobehub/ui';
-import { Card, Result } from 'antd';
+import { Result } from 'antd';
 import { useTheme } from 'antd-style';
 import { LoaderCircle } from 'lucide-react';
 import { memo, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Center } from 'react-layout-kit';
+
+import ResultLayout from '../../../ResultLayout';
 
 interface BuiltinConsentProps {
   uid: string;
@@ -24,26 +25,15 @@ const BuiltinConsent = memo<BuiltinConsentProps>(({ uid }) => {
   const theme = useTheme();
   return (
     <>
-      <Center height="100vh">
-        <Card
-          style={{
-            alignItems: 'center',
-            display: 'flex',
-            justifyContent: 'center',
-            minHeight: 280,
-            minWidth: 500,
-            width: '100%',
-          }}
-        >
-          <Result
-            icon={<Icon icon={LoaderCircle} spin style={{ color: theme.colorText }} />}
-            status="success"
-            style={{ padding: 0 }}
-            subTitle={t('consent.redirecting')}
-            title=""
-          />
-        </Card>
-      </Center>
+      <ResultLayout>
+        <Result
+          icon={<Icon icon={LoaderCircle} spin style={{ color: theme.colorText }} />}
+          status="success"
+          style={{ padding: 0 }}
+          subTitle={t('consent.redirecting')}
+          title=""
+        />
+      </ResultLayout>
       <form action="/oidc/consent" method="post" ref={formRef} style={{ display: 'none' }}>
         <input name="uid" type="hidden" value={uid} />
         <input name="consent" type="hidden" value="accept" />

package/src/app/[variants]/oauth/consent/[uid]/Consent/index.tsx

@@ -61,7 +61,10 @@ const useStyles = createStyles(({ css, token }) => ({
   container: css`
     width: 100%;
     min-height: 100vh;
+    padding-block: 12px;
+
     color: ${token.colorTextBase};
+
     background-color: ${token.colorBgLayout};
   `,
   icon: css`