@lobehub/lobehub 2.0.0-next.163 → 2.0.0-next.165

package/src/app/[variants]/(auth)/signup/[[...signup]]/BetterAuthSignUpForm.tsx

@@ -52,6 +52,7 @@ const useStyles = createStyles(({ css, token }) => ({
 }));
 
 interface SignUpFormValues {
+  confirmPassword: string;
   email: string;
   password: string;
 }
@@ -179,6 +180,28 @@ export default function BetterAuthSignUpForm() {
               />
             </Form.Item>
 
+            <Form.Item
+              dependencies={['password']}
+              name="confirmPassword"
+              rules={[
+                { message: t('betterAuth.errors.confirmPasswordRequired'), required: true },
+                ({ getFieldValue }) => ({
+                  validator(_, value) {
+                    if (!value || getFieldValue('password') === value) {
+                      return Promise.resolve();
+                    }
+                    return Promise.reject(new Error(t('betterAuth.errors.passwordMismatch')));
+                  },
+                }),
+              ]}
+            >
+              <Input.Password
+                placeholder={t('betterAuth.signup.confirmPasswordPlaceholder')}
+                prefix={<Lock size={16} />}
+                size="large"
+              />
+            </Form.Item>
+
             <Form.Item>
               <Button
                 block

package/src/app/[variants]/(main)/(mobile)/me/(home)/features/UserBanner.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { memo } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
 import { Flexbox } from 'react-layout-kit';
+import { Link } from 'react-router-dom';
 
-import { enableAuth, enableNextAuth } from '@/const/auth';
+import { enableAuth } from '@/const/auth';
 import DataStatistics from '@/features/User/DataStatistics';
 import UserInfo from '@/features/User/UserInfo';
 import UserLoginOrSignup from '@/features/User/UserLoginOrSignup/Community';
@@ -12,7 +12,6 @@ import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/selectors';
 
 const UserBanner = memo(() => {
-  const navigate = useNavigate();
   const isLoginWithAuth = useUserStore(authSelectors.isLoginWithAuth);
   const [signIn] = useUserStore((s) => [s.openLogin]);
 
@@ -30,12 +29,7 @@ const UserBanner = memo(() => {
       ) : (
         <UserLoginOrSignup
           onClick={() => {
-            // If use NextAuth, call openLogin method directly
-            if (enableNextAuth) {
-              signIn();
-              return;
-            }
-            navigate('/login');
+            signIn();
           }}
         />
       )}

package/src/app/[variants]/(main)/discover/(detail)/provider/features/Sidebar/ActionButton/ProviderConfig.tsx

@@ -30,8 +30,8 @@ const ProviderConfig = memo(() => {
     const tab = 'provider';
 
     if (isDesktop) {
-      const { dispatch } = await import('@lobechat/electron-client-ipc');
-      await dispatch('openSettingsWindow', {
+      const { ensureElectronIpc } = await import('@/utils/electron/ipc');
+      await ensureElectronIpc().windows.openSettingsWindow({
         searchParams,
         tab,
       });

package/src/app/[variants]/(main)/profile/(home)/Client.tsx

@@ -31,6 +31,7 @@ interface ProfileRowProps {
   action?: ReactNode;
   children: ReactNode;
   label: string;
+  mobile?: boolean;
 }
 
 const rowStyle: CSSProperties = {
@@ -43,17 +44,31 @@ const labelStyle: CSSProperties = {
   width: 160,
 };
 
-const ProfileRow = memo<ProfileRowProps>(({ label, children, action }) => (
-  <Flexbox align="center" gap={24} horizontal justify="space-between" style={rowStyle}>
-    <Flexbox align="center" gap={24} horizontal style={{ flex: 1 }}>
-      <Typography.Text style={labelStyle}>{label}</Typography.Text>
-      <Flexbox style={{ flex: 1 }}>{children}</Flexbox>
+const ProfileRow = memo<ProfileRowProps>(({ label, children, action, mobile }) => {
+  if (mobile) {
+    return (
+      <Flexbox gap={12} style={rowStyle}>
+        <Flexbox align="center" horizontal justify="space-between">
+          <Typography.Text strong>{label}</Typography.Text>
+          {action}
+        </Flexbox>
+        <Flexbox>{children}</Flexbox>
+      </Flexbox>
+    );
+  }
+
+  return (
+    <Flexbox align="center" gap={24} horizontal justify="space-between" style={rowStyle}>
+      <Flexbox align="center" gap={24} horizontal style={{ flex: 1 }}>
+        <Typography.Text style={labelStyle}>{label}</Typography.Text>
+        <Flexbox style={{ flex: 1 }}>{children}</Flexbox>
+      </Flexbox>
+      {action && <Flexbox>{action}</Flexbox>}
     </Flexbox>
-    {action && <Flexbox>{action}</Flexbox>}
-  </Flexbox>
-));
+  );
+});
 
-const AvatarRow = memo(() => {
+const AvatarRow = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('auth');
   const isLogin = useUserStore(authSelectors.isLogin);
   const updateAvatar = useUserStore((s) => s.updateAvatar);
@@ -89,34 +104,48 @@ const AvatarRow = memo(() => {
 
   const canUpload = !enableAuth || isLogin;
 
+  const avatarContent = canUpload ? (
+    <Spin indicator={<LoadingOutlined spin />} spinning={uploading}>
+      <Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
+        <UserAvatar clickable size={40} />
+      </Upload>
+    </Spin>
+  ) : (
+    <UserAvatar size={40} />
+  );
+
+  const updateAction = canUpload ? (
+    <Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
+      <Typography.Text style={{ cursor: 'pointer', fontSize: 13 }}>
+        {t('profile.updateAvatar')}
+      </Typography.Text>
+    </Upload>
+  ) : null;
+
+  if (mobile) {
+    return (
+      <Flexbox gap={12} style={rowStyle}>
+        <Flexbox align="center" horizontal justify="space-between">
+          <Typography.Text strong>{t('profile.avatar')}</Typography.Text>
+          {updateAction}
+        </Flexbox>
+        <Flexbox>{avatarContent}</Flexbox>
+      </Flexbox>
+    );
+  }
+
   return (
     <Flexbox align="center" gap={24} horizontal justify="space-between" style={rowStyle}>
       <Flexbox align="center" gap={24} horizontal style={{ flex: 1 }}>
         <Typography.Text style={labelStyle}>{t('profile.avatar')}</Typography.Text>
-        <Flexbox style={{ flex: 1 }}>
-          {canUpload ? (
-            <Spin indicator={<LoadingOutlined spin />} spinning={uploading}>
-              <Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
-                <UserAvatar clickable size={40} />
-              </Upload>
-            </Spin>
-          ) : (
-            <UserAvatar size={40} />
-          )}
-        </Flexbox>
+        <Flexbox style={{ flex: 1 }}>{avatarContent}</Flexbox>
       </Flexbox>
-      {canUpload && (
-        <Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
-          <Typography.Text style={{ cursor: 'pointer', fontSize: 13 }}>
-            {t('profile.updateAvatar')}
-          </Typography.Text>
-        </Upload>
-      )}
+      {updateAction}
     </Flexbox>
   );
 });
 
-const FullNameRow = memo(() => {
+const FullNameRow = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('auth');
   const fullName = useUserStore(userProfileSelectors.fullName);
   const updateFullName = useUserStore((s) => s.updateFullName);
@@ -152,64 +181,83 @@ const FullNameRow = memo(() => {
     }
   }, [editValue, updateFullName]);
 
+  const editingContent = (
+    <motion.div
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -10 }}
+      initial={{ opacity: 0, y: -10 }}
+      key="editing"
+      transition={{ duration: 0.2 }}
+    >
+      <Flexbox gap={12}>
+        {!mobile && <Typography.Text strong>{t('profile.fullNameInputHint')}</Typography.Text>}
+        <Input
+          autoFocus
+          onChange={(e) => setEditValue(e.target.value)}
+          onPressEnter={handleSave}
+          placeholder={t('profile.fullName')}
+          value={editValue}
+        />
+        <Flexbox gap={8} horizontal justify="flex-end">
+          <Button disabled={saving} onClick={handleCancel} size="small">
+            {t('profile.cancel')}
+          </Button>
+          <Button loading={saving} onClick={handleSave} size="small" type="primary">
+            {t('profile.save')}
+          </Button>
+        </Flexbox>
+      </Flexbox>
+    </motion.div>
+  );
+
+  const displayContent = (
+    <motion.div
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      initial={{ opacity: 0 }}
+      key="display"
+      transition={{ duration: 0.2 }}
+    >
+      {mobile ? (
+        <Typography.Text>{fullName || '--'}</Typography.Text>
+      ) : (
+        <Flexbox align="center" horizontal justify="space-between">
+          <Typography.Text>{fullName || '--'}</Typography.Text>
+          <Typography.Text onClick={handleStartEdit} style={{ cursor: 'pointer', fontSize: 13 }}>
+            {t('profile.updateFullName')}
+          </Typography.Text>
+        </Flexbox>
+      )}
+    </motion.div>
+  );
+
+  if (mobile) {
+    return (
+      <Flexbox gap={12} style={rowStyle}>
+        <Flexbox align="center" horizontal justify="space-between">
+          <Typography.Text strong>{t('profile.fullName')}</Typography.Text>
+          {!isEditing && (
+            <Typography.Text onClick={handleStartEdit} style={{ cursor: 'pointer', fontSize: 13 }}>
+              {t('profile.updateFullName')}
+            </Typography.Text>
+          )}
+        </Flexbox>
+        <AnimatePresence mode="wait">{isEditing ? editingContent : displayContent}</AnimatePresence>
+      </Flexbox>
+    );
+  }
+
   return (
     <Flexbox gap={24} horizontal style={rowStyle}>
       <Typography.Text style={labelStyle}>{t('profile.fullName')}</Typography.Text>
       <Flexbox style={{ flex: 1 }}>
-        <AnimatePresence mode="wait">
-          {isEditing ? (
-            <motion.div
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -10 }}
-              initial={{ opacity: 0, y: -10 }}
-              key="editing"
-              transition={{ duration: 0.2 }}
-            >
-              <Flexbox gap={12}>
-                <Typography.Text strong>{t('profile.fullNameInputHint')}</Typography.Text>
-                <Input
-                  autoFocus
-                  onChange={(e) => setEditValue(e.target.value)}
-                  onPressEnter={handleSave}
-                  placeholder={t('profile.fullName')}
-                  value={editValue}
-                />
-                <Flexbox gap={8} horizontal justify="flex-end">
-                  <Button disabled={saving} onClick={handleCancel} size="small">
-                    {t('profile.cancel')}
-                  </Button>
-                  <Button loading={saving} onClick={handleSave} size="small" type="primary">
-                    {t('profile.save')}
-                  </Button>
-                </Flexbox>
-              </Flexbox>
-            </motion.div>
-          ) : (
-            <motion.div
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              initial={{ opacity: 0 }}
-              key="display"
-              transition={{ duration: 0.2 }}
-            >
-              <Flexbox align="center" horizontal justify="space-between">
-                <Typography.Text>{fullName || '--'}</Typography.Text>
-                <Typography.Text
-                  onClick={handleStartEdit}
-                  style={{ cursor: 'pointer', fontSize: 13 }}
-                >
-                  {t('profile.updateFullName')}
-                </Typography.Text>
-              </Flexbox>
-            </motion.div>
-          )}
-        </AnimatePresence>
+        <AnimatePresence mode="wait">{isEditing ? editingContent : displayContent}</AnimatePresence>
       </Flexbox>
     </Flexbox>
   );
 });
 
-const UsernameRow = memo(() => {
+const UsernameRow = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('auth');
   const username = useUserStore(userProfileSelectors.username);
   const updateUsername = useUserStore((s) => s.updateUsername);
@@ -281,70 +329,89 @@ const UsernameRow = memo(() => {
     setError('');
   };
 
+  const editingContent = (
+    <motion.div
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -10 }}
+      initial={{ opacity: 0, y: -10 }}
+      key="editing"
+      transition={{ duration: 0.2 }}
+    >
+      <Flexbox gap={12}>
+        {!mobile && <Typography.Text strong>{t('profile.usernameInputHint')}</Typography.Text>}
+        <Input
+          autoFocus
+          onChange={handleInputChange}
+          onPressEnter={handleSave}
+          placeholder={t('profile.usernamePlaceholder')}
+          status={error ? 'error' : undefined}
+          value={editValue}
+        />
+        {error && (
+          <Typography.Text style={{ fontSize: 12 }} type="danger">
+            {error}
+          </Typography.Text>
+        )}
+        <Flexbox gap={8} horizontal justify="flex-end">
+          <Button disabled={saving} onClick={handleCancel} size="small">
+            {t('profile.cancel')}
+          </Button>
+          <Button loading={saving} onClick={handleSave} size="small" type="primary">
+            {t('profile.save')}
+          </Button>
+        </Flexbox>
+      </Flexbox>
+    </motion.div>
+  );
+
+  const displayContent = (
+    <motion.div
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      initial={{ opacity: 0 }}
+      key="display"
+      transition={{ duration: 0.2 }}
+    >
+      {mobile ? (
+        <Typography.Text>{username || '--'}</Typography.Text>
+      ) : (
+        <Flexbox align="center" horizontal justify="space-between">
+          <Typography.Text>{username || '--'}</Typography.Text>
+          <Typography.Text onClick={handleStartEdit} style={{ cursor: 'pointer', fontSize: 13 }}>
+            {t('profile.updateUsername')}
+          </Typography.Text>
+        </Flexbox>
+      )}
+    </motion.div>
+  );
+
+  if (mobile) {
+    return (
+      <Flexbox gap={12} style={rowStyle}>
+        <Flexbox align="center" horizontal justify="space-between">
+          <Typography.Text strong>{t('profile.username')}</Typography.Text>
+          {!isEditing && (
+            <Typography.Text onClick={handleStartEdit} style={{ cursor: 'pointer', fontSize: 13 }}>
+              {t('profile.updateUsername')}
+            </Typography.Text>
+          )}
+        </Flexbox>
+        <AnimatePresence mode="wait">{isEditing ? editingContent : displayContent}</AnimatePresence>
+      </Flexbox>
+    );
+  }
+
   return (
     <Flexbox gap={24} horizontal style={rowStyle}>
       <Typography.Text style={labelStyle}>{t('profile.username')}</Typography.Text>
       <Flexbox style={{ flex: 1 }}>
-        <AnimatePresence mode="wait">
-          {isEditing ? (
-            <motion.div
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -10 }}
-              initial={{ opacity: 0, y: -10 }}
-              key="editing"
-              transition={{ duration: 0.2 }}
-            >
-              <Flexbox gap={12}>
-                <Typography.Text strong>{t('profile.usernameInputHint')}</Typography.Text>
-                <Input
-                  autoFocus
-                  onChange={handleInputChange}
-                  onPressEnter={handleSave}
-                  placeholder={t('profile.usernamePlaceholder')}
-                  status={error ? 'error' : undefined}
-                  value={editValue}
-                />
-                {error && (
-                  <Typography.Text style={{ fontSize: 12 }} type="danger">
-                    {error}
-                  </Typography.Text>
-                )}
-                <Flexbox gap={8} horizontal justify="flex-end">
-                  <Button disabled={saving} onClick={handleCancel} size="small">
-                    {t('profile.cancel')}
-                  </Button>
-                  <Button loading={saving} onClick={handleSave} size="small" type="primary">
-                    {t('profile.save')}
-                  </Button>
-                </Flexbox>
-              </Flexbox>
-            </motion.div>
-          ) : (
-            <motion.div
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              initial={{ opacity: 0 }}
-              key="display"
-              transition={{ duration: 0.2 }}
-            >
-              <Flexbox align="center" horizontal justify="space-between">
-                <Typography.Text>{username || '--'}</Typography.Text>
-                <Typography.Text
-                  onClick={handleStartEdit}
-                  style={{ cursor: 'pointer', fontSize: 13 }}
-                >
-                  {t('profile.updateUsername')}
-                </Typography.Text>
-              </Flexbox>
-            </motion.div>
-          )}
-        </AnimatePresence>
+        <AnimatePresence mode="wait">{isEditing ? editingContent : displayContent}</AnimatePresence>
       </Flexbox>
     </Flexbox>
   );
 });
 
-const PasswordRow = memo(() => {
+const PasswordRow = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('auth');
   const userProfile = useUserStore(userProfileSelectors.userProfile);
   const hasPasswordAccount = useUserStore(authSelectors.hasPasswordAccount);
@@ -387,6 +454,7 @@ const PasswordRow = memo(() => {
         </Typography.Text>
       }
       label={t('profile.password')}
+      mobile={mobile}
     >
       <Typography.Text>{hasPasswordAccount ? '••••••' : '--'}</Typography.Text>
     </ProfileRow>
@@ -435,24 +503,24 @@ const Client = memo<{ mobile?: boolean }>(({ mobile }) => {
       <Divider style={{ marginBlock: 0 }} />
 
       {/* Avatar Row - Editable */}
-      <AvatarRow />
+      <AvatarRow mobile={mobile} />
 
       <Divider style={{ margin: 0 }} />
 
       {/* Full Name Row - Editable */}
-      <FullNameRow />
+      <FullNameRow mobile={mobile} />
 
       <Divider style={{ margin: 0 }} />
 
       {/* Username Row - Editable */}
-      <UsernameRow />
+      <UsernameRow mobile={mobile} />
 
       <Divider style={{ margin: 0 }} />
 
       {/* Password Row - For Better Auth users to change or set password */}
       {isLoginWithBetterAuth && (
         <>
-          <PasswordRow />
+          <PasswordRow mobile={mobile} />
           <Divider style={{ margin: 0 }} />
         </>
       )}
@@ -460,7 +528,7 @@ const Client = memo<{ mobile?: boolean }>(({ mobile }) => {
       {/* Email Row - Read Only */}
       {isLoginWithAuth && userProfile?.email && (
         <>
-          <ProfileRow label={t('profile.email')}>
+          <ProfileRow label={t('profile.email')} mobile={mobile}>
             <Typography.Text>{userProfile.email}</Typography.Text>
           </ProfileRow>
           <Divider style={{ margin: 0 }} />
@@ -469,7 +537,7 @@ const Client = memo<{ mobile?: boolean }>(({ mobile }) => {
 
       {/* SSO Providers Row */}
       {isLoginWithAuth && (
-        <ProfileRow label={t('profile.sso.providers')}>
+        <ProfileRow label={t('profile.sso.providers')} mobile={mobile}>
           <SSOProvidersList />
         </ProfileRow>
       )}

package/src/features/User/PlanTag.tsx

@@ -1,8 +1,8 @@
 import { Tag } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 import urlJoin from 'url-join';
 
 import { OFFICIAL_URL } from '@/const/url';
@@ -37,12 +37,12 @@ const PlanTag = memo<PlanTagProps>(({ type = PlanType.Preview }) => {
 
   return (
     <Link
-      href={urlJoin(
+      style={{ cursor: 'pointer' }}
+      target={isDesktop ? '_blank' : undefined}
+      to={urlJoin(
         isDesktop ? OFFICIAL_URL : '/',
         isFree ? '/subscription/plans' : '/subscription/usage',
       )}
-      style={{ cursor: 'pointer' }}
-      target={isDesktop ? '_blank' : undefined}
     >
       <PlanIcon plan={type} size={22} type={'tag'} />
     </Link>

package/src/locales/default/auth.ts

@@ -54,6 +54,7 @@ export default {
   },
   betterAuth: {
     errors: {
+      confirmPasswordRequired: '请确认密码',
       emailExists: '该邮箱已注册，请直接登录',
       emailInvalid: '请输入有效的邮箱地址或用户名',
       emailNotRegistered: '该邮箱或用户名尚未注册',
@@ -65,6 +66,7 @@ export default {
       passwordFormat: '密码必须同时包含字母和数字',
       passwordMaxLength: '密码最多不超过 64 个字符',
       passwordMinLength: '密码至少需要 8 个字符',
+      passwordMismatch: '两次输入的密码不一致',
       passwordRequired: '请输入密码',
       usernameNotRegistered: '该用户名尚未注册',
       usernameRequired: '请输入用户名',
@@ -125,6 +127,7 @@ export default {
       submit: '登录',
     },
     signup: {
+      confirmPasswordPlaceholder: '请确认密码',
       emailPlaceholder: '请输入邮箱地址',
       error: '注册失败，请重试',
       firstNamePlaceholder: '名字',

package/src/locales/default/setting.ts

@@ -806,6 +806,7 @@ export default {
       noEnabled: '暂无启用插件',
       store: '插件商店',
     },
+
     tabs: {
       all: '全部',
       installed: '已启用',