@qlover/create-app 0.7.8 → 0.7.10

package/dist/templates/next-app/src/server/services/UserService.ts

@@ -0,0 +1,105 @@
+import { inject, injectable } from 'inversify';
+import { isEmpty, last, omit } from 'lodash';
+import {
+  API_USER_NOT_FOUND,
+  API_USER_ALREADY_EXISTS
+} from '@config/Identifier/api';
+import { PasswordEncrypt } from '../PasswordEncrypt';
+import { UserRepository } from '../repositorys/UserRepository';
+import { ServerAuth } from '../ServerAuth';
+import {
+  UserCredentialToken,
+  type UserCredentialTokenValue
+} from '../UserCredentialToken';
+import type { CrentialTokenInterface } from '../port/CrentialTokenInterface';
+import type { UserAuthInterface } from '../port/UserAuthInterface';
+import type { UserRepositoryInterface } from '../port/UserRepositoryInterface';
+import type { UserServiceInterface } from '../port/UserServiceInterface';
+import type { UserSchema } from '@migrations/schema/UserSchema';
+import type { Encryptor } from '@qlover/fe-corekit';
+
+@injectable()
+export class UserService implements UserServiceInterface {
+  constructor(
+    @inject(UserRepository)
+    protected userRepository: UserRepositoryInterface,
+    @inject(ServerAuth)
+    protected userAuth: UserAuthInterface,
+    @inject(PasswordEncrypt)
+    protected encryptor: Encryptor<string, string>,
+    @inject(UserCredentialToken)
+    protected credentialToken: CrentialTokenInterface<UserCredentialTokenValue>
+  ) {}
+
+  async register(params: {
+    email: string;
+    password: string;
+  }): Promise<UserSchema> {
+    const user = await this.userRepository.getUserByEmail(params.email);
+
+    if (!isEmpty(user)) {
+      throw new Error(API_USER_ALREADY_EXISTS);
+    }
+
+    const result = await this.userRepository.add({
+      email: params.email,
+      password: this.encryptor.encrypt(params.password)
+    });
+
+    const target = last(result);
+    if (!target) {
+      throw new Error(API_USER_NOT_FOUND);
+    }
+
+    return omit(target, 'password') as UserSchema;
+  }
+
+  async login(params: {
+    email: string;
+    password: string;
+  }): Promise<UserSchema> {
+    const user = await this.userRepository.getUserByEmail(params.email);
+
+    if (!user) {
+      throw new Error(API_USER_NOT_FOUND);
+    }
+
+    const encryptedPassword = this.encryptor.encrypt(params.password);
+
+    if (encryptedPassword !== user.password) {
+      throw new Error(API_USER_NOT_FOUND);
+    }
+
+    const credentialToken = await this.credentialToken.generateToken(user);
+
+    await this.userRepository.updateById(user.id, {
+      credential_token: credentialToken
+    });
+
+    return Object.assign(omit(user, 'password') as UserSchema, {
+      credential_token: credentialToken
+    });
+  }
+
+  async logout(): Promise<void> {
+    const auth = await this.userAuth.getAuth();
+
+    if (!auth) {
+      return;
+    }
+
+    try {
+      const user = await this.credentialToken.parseToken(auth);
+
+      console.log('user', user);
+
+      await this.userRepository.updateById(user.id, {
+        credential_token: ''
+      });
+    } catch {
+      return;
+    }
+
+    await this.userAuth.clear();
+  }
+}

package/dist/templates/next-app/src/server/validators/LoginValidator.ts

@@ -0,0 +1,79 @@
+import { ExecutorError } from '@qlover/fe-corekit';
+import { z } from 'zod';
+import {
+  V_LOGIN_PARAMS_REQUIRED,
+  V_EMAIL_INVALID,
+  V_PASSWORD_MIN_LENGTH,
+  V_PASSWORD_MAX_LENGTH,
+  V_PASSWORD_SPECIAL_CHARS
+} from '@config/Identifier/validator';
+import type {
+  ValidatorInterface,
+  ValidationFaildResult
+} from '../port/ValidatorInterface';
+
+export interface LoginValidatorData {
+  email: string;
+  password: string;
+}
+
+const emailSchema = z.email({ error: V_EMAIL_INVALID });
+
+const passwordSchema = z
+  .string()
+  .min(6, { error: V_PASSWORD_MIN_LENGTH })
+  .max(50, { error: V_PASSWORD_MAX_LENGTH })
+  .regex(/^\S+$/, { error: V_PASSWORD_SPECIAL_CHARS });
+
+interface ExtendedExecutorError extends ExecutorError {
+  issues?: ValidationFaildResult[];
+}
+
+export class LoginValidator implements ValidatorInterface {
+  validateEmail(data: unknown): void | ValidationFaildResult {
+    const emailResult = emailSchema.safeParse(data);
+    if (!emailResult.success) {
+      return emailResult.error.issues[0];
+    }
+  }
+
+  validatePassword(data: unknown): void | ValidationFaildResult {
+    const passwordResult = passwordSchema.safeParse(data);
+    if (!passwordResult.success) {
+      return passwordResult.error.issues[0];
+    }
+  }
+
+  validate(data: unknown): void | ValidationFaildResult {
+    if (typeof data !== 'object' || data === null) {
+      return {
+        path: ['form'],
+        message: V_LOGIN_PARAMS_REQUIRED
+      };
+    }
+
+    const { email, password } = data as Record<string, unknown>;
+
+    let validateResult = this.validateEmail(email);
+    if (validateResult != null) {
+      return validateResult;
+    }
+
+    validateResult = this.validatePassword(password);
+    if (validateResult != null) {
+      return validateResult;
+    }
+  }
+
+  getThrow(data: unknown): LoginValidatorData {
+    const result = this.validate(data);
+
+    if (result == null) {
+      return data as LoginValidatorData;
+    }
+
+    const error: ExtendedExecutorError = new ExecutorError(result.message);
+    error.issues = [result];
+    throw error;
+  }
+}

package/dist/templates/next-app/src/styles/css/antd-themes/_default.css

@@ -236,4 +236,16 @@ html,
     --fe-message-info-color: var(--fe-color-primary);
     --fe-message-loading-color: var(--fe-color-primary);
   }
+
+  .ant-dropdown-css-var {
+    /* Control Variables - Default Theme */
+    --fe-control-outline-width: 2px;
+    --fe-control-interactive-size: 16px;
+    --fe-control-item-bg-hover: rgba(0, 0, 0, 0.04);
+    --fe-control-item-bg-active: #e6f4ff;
+    --fe-control-item-bg-active-hover: #bae0ff;
+    --fe-control-item-bg-active-disabled: rgba(0, 0, 0, 0.15);
+    --fe-control-tmp-outline: rgba(0, 0, 0, 0.02);
+    --fe-control-outline: rgba(96, 165, 250, 0.1); /* blue-400 with 0.1 opacity */
+  }
 }

package/dist/templates/next-app/src/styles/css/antd-themes/dark.css

@@ -175,4 +175,30 @@
       0.85
     ); /* 确保文字在深色背景上清晰可见 */
   }
+  .ant-dropdown-css-var {
+    /* Control Variables - Dark Theme */
+    --fe-control-outline-width: 2px;
+    --fe-control-interactive-size: 16px;
+    --fe-control-item-bg-hover: rgba(255, 255, 255, 0.08);
+    --fe-control-item-bg-active: rgba(
+      96,
+      165,
+      250,
+      0.2
+    ); /* blue-400 with 0.2 opacity */
+    --fe-control-item-bg-active-hover: rgba(
+      96,
+      165,
+      250,
+      0.3
+    ); /* blue-400 with 0.3 opacity */
+    --fe-control-item-bg-active-disabled: rgba(255, 255, 255, 0.15);
+    --fe-control-tmp-outline: rgba(255, 255, 255, 0.02);
+    --fe-control-outline: rgba(
+      96,
+      165,
+      250,
+      0.1
+    ); /* blue-400 with 0.1 opacity */
+  }
 }

package/dist/templates/next-app/src/styles/css/antd-themes/pink.css

@@ -201,4 +201,20 @@
       0 9px 28px 8px rgba(244, 114, 182, 0.05);
     --fe-modal-mask-bg: rgba(244, 114, 182, 0.45);
   }
+  .ant-dropdown-css-var {
+    /* Control Variables - Pink Theme */
+    --fe-control-outline-width: 2px;
+    --fe-control-interactive-size: 16px;
+    --fe-control-item-bg-hover: rgba(0, 0, 0, 0.04);
+    --fe-control-item-bg-active: #fce7f3; /* pink-100 */
+    --fe-control-item-bg-active-hover: #fbcfe8; /* pink-200 */
+    --fe-control-item-bg-active-disabled: rgba(0, 0, 0, 0.15);
+    --fe-control-tmp-outline: rgba(0, 0, 0, 0.02);
+    --fe-control-outline: rgba(
+      244,
+      114,
+      182,
+      0.1
+    ); /* pink-400 with 0.1 opacity */
+  }
 }

package/dist/templates/next-app/src/styles/css/page.css

@@ -11,9 +11,10 @@
   --color-secondary: rgba(var(--color-bg-secondary));
   --color-elevated: rgba(var(--color-bg-elevated));
   --color-text: rgba(var(--text-primary));
+  --color-text-hover: rgba(var(--text-primary-hover));
   --color-text-secondary: rgba(var(--text-secondary));
   --color-text-tertiary: rgba(var(--text-tertiary));
-  --color-border: rgba(var(--color-border));
-  --color-brand: rgba(var(--color-brand));
-  --color-brand-hover: rgba(var(--color-brand-hover));
+  --color-c-border: rgba(var(--color-border));
+  --color-c-brand: rgba(var(--color-brand));
+  --color-c-brand-hover: rgba(var(--color-brand-hover));
 }

package/dist/templates/next-app/src/styles/css/themes/_default.css

@@ -8,6 +8,7 @@
 
     /* 文字颜色 */
     --text-primary: 15 23 42; /* slate-900 */
+    --text-primary-hover: 100 116 139; /* slate-500 */
     --text-secondary: 71 85 105; /* slate-600 */
     --text-tertiary: 100 116 139; /* slate-500 */
 

package/dist/templates/next-app/src/styles/css/themes/dark.css

@@ -8,6 +8,7 @@
 
     /* 文字颜色 */
     --text-primary: 255 255 255;
+    --text-primary-hover: 148 163 184; /* slate-400 */
     --text-secondary: 148 163 184; /* slate-400 */
     --text-tertiary: 100 116 139; /* slate-500 */
 

package/dist/templates/next-app/src/styles/css/themes/pink.css

@@ -8,6 +8,7 @@
 
     /* 文字颜色 */
     --text-primary: 190 18 60; /* rose-700 */
+    --text-primary-hover: 244 63 94; /* rose-500 */
     --text-secondary: 225 29 72; /* rose-600 */
     --text-tertiary: 244 63 94; /* rose-500 */
 

package/dist/templates/next-app/src/uikit/components/BaseHeader.tsx

@@ -10,10 +10,12 @@ import { ThemeSwitcher } from './ThemeSwitcher';
 export function BaseHeader(props: { showLogoutButton?: boolean }) {
   const { showLogoutButton } = props;
   const appConfig = useIOC(IOCIdentifier.AppConfig);
+  const i18nService = useIOC(IOCIdentifier.I18nServiceInterface);
+
   return (
     <header
-      data-testid="base-header"
-      className="h-14 bg-secondary border-b border-border sticky top-0 z-50"
+      data-testid="BaseHeader"
+      className="h-14 bg-secondary border-b border-c-border sticky top-0 z-50"
     >
       <div className="flex items-center justify-between h-full px-4 mx-auto max-w-7xl">
         <div className="flex items-center">
@@ -21,12 +23,6 @@ export function BaseHeader(props: { showLogoutButton?: boolean }) {
             href="/"
             className="flex items-center hover:opacity-80 transition-opacity"
           >
-            {/* <img
-              data-testid="base-header-logo"
-              src={IOC(PublicAssetsPath).getPath('/logo.svg')}
-              alt="logo"
-              className="h-8 w-auto"
-            /> */}
             <span
               data-testid="base-header-app-name"
               className="ml-2 text-lg font-semibold text-text"
@@ -35,10 +31,9 @@ export function BaseHeader(props: { showLogoutButton?: boolean }) {
             </span>
           </Link>
         </div>
-        <div className="flex items-center gap-4">
-          <LanguageSwitcher />
+        <div className="flex items-center gap-2 md:gap-4">
+          <LanguageSwitcher i18nService={i18nService} />
           <ThemeSwitcher />
-
           {showLogoutButton && <LogoutButton />}
         </div>
       </div>

package/dist/templates/next-app/src/uikit/components/BaseLayout.tsx

@@ -0,0 +1,27 @@
+import { BaseHeader } from './BaseHeader';
+import type { HTMLAttributes } from 'react';
+
+export interface BaseLayoutProps extends HTMLAttributes<HTMLDivElement> {
+  showLogoutButton?: boolean;
+  mainProps?: HTMLAttributes<HTMLElement>;
+}
+
+export function BaseLayout({
+  children,
+  showLogoutButton,
+  mainProps,
+  ...props
+}: BaseLayoutProps) {
+  return (
+    <div
+      data-testid="BaseLayout"
+      className="flex flex-col min-h-screen"
+      {...props}
+    >
+      <BaseHeader showLogoutButton={showLogoutButton} />
+      <main className="flex flex-1 flex-col bg-primary" {...mainProps}>
+        {children}
+      </main>
+    </div>
+  );
+}

package/dist/templates/next-app/src/uikit/components/BootstrapsProvider.tsx

@@ -1,10 +1,11 @@
 'use client';
 import '@ant-design/v5-patch-for-react-19';
 import { useRouter } from 'next/navigation';
-import { useLocale } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
 import { useEffect } from 'react';
 import { I } from '@config/IOCIdentifier';
 import { NavigateBridge } from '@/base/cases/NavigateBridge';
+import type { I18nServiceLocale } from '@/base/port/I18nServiceInterface';
 import { BootstrapClient } from '@/core/bootstraps/BootstrapClient';
 import { clientIOC } from '@/core/clientIoc/ClientIOC';
 import { IOCContext } from '../context/IOCContext';
@@ -13,12 +14,18 @@ export function BootstrapsProvider(props: { children: React.ReactNode }) {
   const IOC = clientIOC.create();
   const locale = useLocale();
   const router = useRouter();
+  const t = useTranslations();
 
   useEffect(() => {
     IOC(I.RouterServiceInterface).setLocale(locale);
     IOC(NavigateBridge).setUIBridge(router);
   }, [locale, router, IOC]);
 
+  useEffect(() => {
+    IOC(I.I18nServiceInterface).changeLanguage(locale as I18nServiceLocale);
+    IOC(I.I18nServiceInterface).setTranslator(t);
+  }, [t, IOC, locale]);
+
   useEffect(() => {
     if (typeof window !== 'undefined') {
       BootstrapClient.main({

package/dist/templates/next-app/src/uikit/components/LanguageSwitcher.tsx

@@ -1,24 +1,38 @@
 'use client';
 
-import { Select } from 'antd';
+import { TranslationOutlined } from '@ant-design/icons';
+import { Dropdown } from 'antd';
 import { useLocale } from 'next-intl';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { i18nConfig } from '@config/i18n';
-import { IOCIdentifier } from '@config/IOCIdentifier';
-import type { I18nServiceLocale } from '@/base/port/I18nServiceInterface';
+import type {
+  I18nServiceInterface,
+  I18nServiceLocale
+} from '@/base/port/I18nServiceInterface';
 import { usePathname, useRouter } from '@/i18n/routing';
-import { useIOC } from '../hook/useIOC';
-import { useStore } from '../hook/useStore';
 import type { LocaleType } from '@config/i18n';
+import type { ItemType } from 'antd/es/menu/interface';
 
-export function LanguageSwitcher() {
-  const i18nService = useIOC(IOCIdentifier.I18nServiceInterface);
-  const { loading } = useStore(i18nService);
+export function LanguageSwitcher(props: { i18nService: I18nServiceInterface }) {
+  const { i18nService } = props;
   const pathname = usePathname(); // current pathname, aware of i18n
 
   const router = useRouter(); // i18n-aware router instance
   const currentLocale = useLocale() as LocaleType; // currently active locale
 
+  const options: ItemType[] = useMemo(() => {
+    return i18nConfig.supportedLngs.map(
+      (lang) =>
+        ({
+          type: 'item',
+          key: lang,
+          value: lang,
+          label:
+            i18nConfig.localeNames[lang as keyof typeof i18nConfig.localeNames]
+        }) as ItemType
+    );
+  }, []);
+
   const handleLanguageChange = useCallback(
     async (value: string) => {
       // Set a persistent cookie with the user's preferred locale (valid for 1 year)
@@ -35,18 +49,32 @@ export function LanguageSwitcher() {
     [i18nService, pathname, router]
   );
 
+  const nextLocale = useMemo(() => {
+    const targetIndex = i18nConfig.supportedLngs.indexOf(currentLocale) + 1;
+    return i18nConfig.supportedLngs[
+      targetIndex % i18nConfig.supportedLngs.length
+    ];
+  }, [currentLocale]);
+
   return (
-    <Select
-      data-testid="LanguageSwitcher"
-      loading={loading}
-      value={currentLocale}
-      onChange={handleLanguageChange}
-      options={i18nConfig.supportedLngs.map((lang) => ({
-        value: lang,
-        label:
-          i18nConfig.localeNames[lang as keyof typeof i18nConfig.localeNames]
-      }))}
-      className="w-24"
-    />
+    <Dropdown
+      data-testid="LanguageSwitcherDropdown"
+      trigger={['hover']}
+      menu={{
+        selectedKeys: [currentLocale],
+        items: options,
+        onClick: ({ key }) => {
+          handleLanguageChange(key);
+        }
+      }}
+    >
+      <span
+        data-testid="LanguageSwitcher"
+        className="text-text hover:text-text-hover cursor-pointer text-lg transition-colors"
+        onClick={() => handleLanguageChange(nextLocale)}
+      >
+        <TranslationOutlined />
+      </span>
+    </Dropdown>
   );
 }

package/dist/templates/next-app/src/uikit/components/LogoutButton.tsx

@@ -1,34 +1,44 @@
-import { Button } from 'antd';
+import { LogoutOutlined } from '@ant-design/icons';
+import { Tooltip } from 'antd';
 import { useCallback } from 'react';
 import {
   AUTH_LOGOUT_DIALOG_CONTENT,
   AUTH_LOGOUT_DIALOG_TITLE
 } from '@config/Identifier';
-import { IOCIdentifier } from '@config/IOCIdentifier';
+import { I } from '@config/IOCIdentifier';
 import { useI18nInterface } from '../hook/useI18nInterface';
 import { useIOC } from '../hook/useIOC';
 import type { PageI18nInterface } from '@config/i18n';
 
 export function LogoutButton() {
-  const IOC = useIOC();
+  const dialogHandler = useIOC(I.DialogHandler);
+  const userService = useIOC(I.UserServiceInterface);
+  const routerService = useIOC(I.RouterServiceInterface);
+
   const tt = useI18nInterface({
     title: AUTH_LOGOUT_DIALOG_TITLE,
     content: AUTH_LOGOUT_DIALOG_CONTENT
   } as PageI18nInterface);
 
   const onClick = useCallback(() => {
-    IOC(IOCIdentifier.DialogHandler).confirm({
+    dialogHandler.confirm({
       title: tt.title,
       content: tt.content,
-      onOk: () => {
-        IOC(IOCIdentifier.UserServiceInterface).logout();
+      onOk: async () => {
+        await userService.logout();
+        routerService.gotoLogin();
       }
     });
-  }, [tt, IOC]);
+  }, [tt, dialogHandler, userService, routerService]);
 
   return (
-    <Button data-testid="LogoutButton" danger onClick={onClick}>
-      {tt.title}
-    </Button>
+    <Tooltip data-testid="LogoutIcon" title={tt.title} placement="right">
+      <span
+        className="text-text hover:text-red-500 cursor-pointer text-lg transition-colors"
+        onClick={onClick}
+      >
+        <LogoutOutlined />
+      </span>
+    </Tooltip>
   );
 }