@qlover/create-app 1.0.2 → 2.0.0

package/dist/templates/react-app/src/uikit/components/BaseLayoutProvider.tsx

@@ -1,44 +0,0 @@
-import { useStore } from '@brain-toolkit/react-kit';
-import { I } from '@config/IOCIdentifier';
-import { BaseLayoutService } from '@/base/services/BaseLayoutService';
-import { Loading } from './Loading';
-import { useIOC } from '../hooks/useIOC';
-import { useNavigateBridge } from '../hooks/useNavigateBridge';
-import { useRouterI18nGuard } from '../hooks/useRouterI18nGuard';
-import { useStrictEffect } from '../hooks/useStrictEffect';
-
-/**
- * BaseLayoutProvider
- *
- * /pages/base/Layout.tsx 布局组件的服务提供者
- *
- * - 验证用户信息渲染组件，如果用户未登录则渲染 loading
- *
- * @param children - The children to render
- * @returns
- */
-export function BaseLayoutProvider({
-  children
-}: {
-  children: React.ReactNode;
-}) {
-  const ioc = useIOC();
-  const baseLayoutService = ioc(BaseLayoutService);
-  const userService = ioc(I.UserServiceInterface);
-
-  useStore(userService.getStore());
-
-  useRouterI18nGuard();
-
-  useNavigateBridge();
-
-  useStrictEffect(() => {
-    baseLayoutService.use(ioc(I.I18nKeyErrorPlugin)).starup(ioc);
-  }, []);
-
-  if (!userService.isAuthenticated()) {
-    return <Loading data-testid="BaseLayoutProviderLoading" fullscreen />;
-  }
-
-  return children;
-}

package/dist/templates/react-app/src/uikit/components/BaseRouteProvider.tsx

@@ -1,21 +0,0 @@
-import type { RouteMeta } from '@/base/types/Page';
-import { BaseRoutePageContext } from '@/uikit/contexts/BaseRouteContext';
-import { BaseRouteSeo } from './BaseRouteSeo';
-import type { PropsWithChildren } from 'react';
-
-export function BaseRouteProvider(props: PropsWithChildren<RouteMeta>) {
-  const { children, ..._props } = props;
-
-  return (
-    <BaseRoutePageContext.Provider
-      data-testid="BaseRouteProvider"
-      value={_props}
-    >
-      {typeof _props.i18nInterface === 'object' &&
-        _props.i18nInterface != null &&
-        Object.keys(_props.i18nInterface).length > 0 && <BaseRouteSeo />}
-
-      {children}
-    </BaseRoutePageContext.Provider>
-  );
-}

package/dist/templates/react-app/src/uikit/components/BaseRouteSeo.tsx

@@ -1,18 +0,0 @@
-import type { PageI18nInterface } from '@config/i18n/PageI18nInterface';
-import { ClientSeo } from './ClientSeo';
-import { useBaseRoutePage } from '../contexts/BaseRouteContext';
-
-export function BaseRouteSeo() {
-  const { i18nInterface } = useBaseRoutePage();
-
-  if (!i18nInterface) {
-    return null;
-  }
-
-  return (
-    <ClientSeo
-      data-testid="BaseRouteSeo"
-      i18nInterface={i18nInterface as unknown as PageI18nInterface}
-    />
-  );
-}

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

@@ -1,11 +0,0 @@
-'use client';
-import { clientIOC } from '@/core/clientIoc/ClientIOC';
-import { IOCContext } from '../contexts/IOCContext';
-
-export function BootstrapsProvider(props: { children: React.ReactNode }) {
-  const IOC = clientIOC.create();
-
-  return (
-    <IOCContext.Provider value={IOC}>{props.children}</IOCContext.Provider>
-  );
-}

package/dist/templates/react-app/src/uikit/components/ClientSeo.tsx

@@ -1,62 +0,0 @@
-/* eslint-disable no-restricted-globals */
-import { useEffect } from 'react';
-import type { PageI18nInterface } from '@config/i18n/PageI18nInterface';
-
-export function ClientSeo(props: {
-  i18nInterface: PageI18nInterface;
-  children?: React.ReactNode;
-}) {
-  const { i18nInterface, children } = props;
-
-  useEffect(() => {
-    // Set title
-    document.title = i18nInterface.title;
-
-    // Helper function to create or update meta tag
-    const setMetaTag = (name: string, content: string | undefined) => {
-      if (!content) return;
-
-      let meta = document.querySelector(`meta[name="${name}"]`);
-      if (!meta) {
-        meta = document.createElement('meta');
-        meta.setAttribute('name', name);
-        document.head.appendChild(meta);
-      }
-      meta.setAttribute('content', content);
-    };
-
-    // Set basic meta tags
-    setMetaTag('description', i18nInterface.description);
-    setMetaTag('keywords', i18nInterface.keywords);
-    setMetaTag('author', i18nInterface.author);
-    setMetaTag('publishedTime', i18nInterface.publishedTime);
-    setMetaTag('modifiedTime', i18nInterface.modifiedTime);
-
-    // Set canonical
-    if (i18nInterface.canonical) {
-      setMetaTag('canonical', i18nInterface.canonical);
-    }
-
-    // Set Open Graph tags
-    if (i18nInterface.og) {
-      setMetaTag('og:title', i18nInterface.og.title);
-      setMetaTag('og:description', i18nInterface.og.description);
-      setMetaTag('og:image', i18nInterface.og.image);
-    }
-
-    // Cleanup function (optional, removes meta tags when component unmounts)
-    return () => {
-      // You can optionally remove these tags on unmount
-      // const metaNames = [
-      //   'description', 'keywords', 'author', 'publishedTime',
-      //   'modifiedTime', 'canonical', 'og:title', 'og:description', 'og:image'
-      // ];
-      // metaNames.forEach(name => {
-      //   const meta = document.querySelector(`meta[name="${name}"]`);
-      //   if (meta) meta.remove();
-      // });
-    };
-  }, [i18nInterface]);
-
-  return <>{children}</>;
-}

package/dist/templates/react-app/src/uikit/components/ComboProvider.tsx

@@ -1,38 +0,0 @@
-'use client';
-import { AntdThemeProvider } from '@brain-toolkit/antd-theme-override/react';
-import { useMountedClient } from '@brain-toolkit/react-kit';
-import { I } from '@config/IOCIdentifier';
-import { clientIOC } from '@/core/clientIoc/ClientIOC';
-import type { CommonThemeConfig } from '@config/theme';
-
-/**
- * CommonProvider is a provider for the common components
- *
- * @param param0
- * @returns
- */
-export function ComboProvider(props: {
-  themeConfig: CommonThemeConfig;
-  children: React.ReactNode;
-}) {
-  /**
-   * useMountedClient 会等待客户端完全初始化
-   * 只有在客户端准备就绪后才渲染组件内容
-   * 这样可以确保所有的客户端代码（包括 API 配置、插件等）都已经正确初始化
-   */
-  const mounted = useMountedClient();
-
-  const { themeConfig, children } = props;
-
-  const IOC = clientIOC.create();
-
-  return (
-    <AntdThemeProvider
-      data-testid="ComboProvider"
-      theme={themeConfig.antdTheme}
-      staticApi={IOC(I.DialogHandler)}
-    >
-      {mounted ? children : null}
-    </AntdThemeProvider>
-  );
-}

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

@@ -1,78 +0,0 @@
-import { GlobalOutlined, TranslationOutlined } from '@ant-design/icons';
-import { useStore } from '@brain-toolkit/react-kit/hooks/useStore';
-import { i18nConfig } from '@config/i18n/i18nConfig';
-import { IOCIdentifier } from '@config/IOCIdentifier';
-import { Dropdown } from 'antd';
-import { useCallback } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import type { LocaleType } from '@config/i18n/i18nConfig';
-import { useIOC } from '../hooks/useIOC';
-
-const { supportedLngs } = i18nConfig;
-
-export function LanguageSwitcher() {
-  const navigate = useNavigate();
-  const i18nService = useIOC(IOCIdentifier.I18nServiceInterface);
-  const language = useStore(i18nService, i18nService.selector.language);
-  const { pathname } = useLocation();
-
-  const languageOptions = supportedLngs.map((lang) => ({
-    key: lang,
-    value: lang,
-    label: (
-      <div
-        className="flex items-center gap-2"
-        data-testid={`LanguageSwitcherOption-${lang}`}
-      >
-        <GlobalOutlined />
-        <span>{lang.toUpperCase()}</span>
-      </div>
-    )
-  }));
-
-  const handleLanguageChange = useCallback(
-    async (newLang: LocaleType) => {
-      i18nService.changeLoading(true);
-      // Change i18n language
-      await i18nService.changeLanguage(newLang);
-      // Update URL path
-      navigate(pathname.replace(`/${language}`, `/${newLang}`));
-
-      i18nService.changeLoading(false);
-    },
-    [language, pathname, navigate, i18nService]
-  );
-
-  // const nextLocale = useMemo(() => {
-  //   const targetIndex = i18nConfig.supportedLngs.indexOf(language) + 1;
-  //   return i18nConfig.supportedLngs[
-  //     targetIndex % i18nConfig.supportedLngs.length
-  //   ];
-  // }, [language]);
-
-  return (
-    <Dropdown
-      data-testid="LanguageSwitcherDropdown"
-      trigger={['hover', 'click']}
-      placement="bottom"
-      menu={{
-        // @ts-ignore
-        'data-testid': 'LanguageSwitcherSelect',
-        selectedKeys: [language],
-        items: languageOptions,
-        onClick: ({ key }) => {
-          handleLanguageChange(key as LocaleType);
-        }
-      }}
-    >
-      <span
-        data-testid="LanguageSwitcher"
-        data-testvalue={language}
-        className="text-text hover:text-text-hover cursor-pointer text-lg transition-colors"
-        // onClick={() => handleLanguageChange(nextLocale)}
-      >
-        <TranslationOutlined />
-      </span>
-    </Dropdown>
-  );
-}

package/dist/templates/react-app/src/uikit/components/Loading.tsx

@@ -1,49 +0,0 @@
-import { clsx } from 'clsx';
-
-/**
- * Loading component
- *
- * @description This component displays a loading indicator. It can be used to indicate loading states either in fullscreen mode or within a specific section of the page.
- *
- * @param {boolean} fullscreen - Determines if the loading indicator should cover the entire screen. Defaults to false.
- *
- * @returns {JSX.Element} A div element displaying a loading icon.
- *
- * @example
- * <Loading fullscreen={true} />
- * <Loading fullscreen={false} />
- */
-export function Loading({ fullscreen = false }: { fullscreen?: boolean }) {
-  return (
-    <div
-      data-testid="LoadingRoot"
-      className={clsx('flex justify-center items-center', {
-        'fixed inset-0 backdrop-blur-sm z-50': fullscreen,
-        relative: !fullscreen
-      })}
-      style={{
-        backgroundColor: fullscreen
-          ? 'var(--fe-color-bg-container)'
-          : 'transparent'
-      }}
-    >
-      <div className="flex space-x-3">
-        {[0, 1, 2].map((i) => (
-          <div
-            data-testid="Loading"
-            key={i}
-            className={clsx(
-              'w-3 h-3 rounded-full',
-              'bg-(--fe-color-primary)',
-              'animate-[bounce_1s_ease-in-out_infinite]'
-            )}
-            style={{
-              animationDelay: `${i * 0.2}s`,
-              opacity: 0.6
-            }}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}

package/dist/templates/react-app/src/uikit/components/LocaleLink.tsx

@@ -1,43 +0,0 @@
-import { useLocaleRoutes } from '@config/common';
-import { Link as RouterLink, useParams } from 'react-router-dom';
-import type { ReactNode } from 'react';
-import type { LinkProps, To } from 'react-router-dom';
-
-interface LocaleLinkProps extends Omit<LinkProps, 'href' | 'to'> {
-  href: string | To;
-  locale?: string;
-  children: ReactNode;
-  defaultLocale?: string;
-  className?: string;
-}
-
-export const LocaleLink: React.FC<LocaleLinkProps> = ({
-  href,
-  locale,
-  children,
-  defaultLocale,
-  ...props
-}) => {
-  const { lng } = useParams<{ lng: string }>();
-
-  locale = locale || lng;
-
-  const isDefaultLocale = locale === defaultLocale;
-  const shouldAddLocale = useLocaleRoutes && !isDefaultLocale;
-
-  let localizedHref: string | To;
-  if (typeof href === 'string') {
-    localizedHref = shouldAddLocale ? `/${locale}${href}` : href;
-  } else {
-    localizedHref = {
-      ...href,
-      pathname: shouldAddLocale ? `/${locale}${href.pathname}` : href.pathname
-    };
-  }
-
-  return (
-    <RouterLink data-testid="locale-link" {...props} to={localizedHref}>
-      {children}
-    </RouterLink>
-  );
-};

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

@@ -1,58 +0,0 @@
-import { LogoutOutlined } from '@ant-design/icons';
-import {
-  AUTH_LOGOUT_DIALOG_CONTENT,
-  AUTH_LOGOUT_DIALOG_TITLE
-} from '@config/Identifier/common/common';
-import { IOCIdentifier } from '@config/IOCIdentifier';
-import { Button, Grid } from 'antd';
-import { useCallback } from 'react';
-import { useAppTranslation } from '../hooks/useAppTranslation';
-import { useIOC } from '../hooks/useIOC';
-
-const { useBreakpoint } = Grid;
-
-export function LogoutButton() {
-  const { t } = useAppTranslation();
-  const dialogHandler = useIOC(IOCIdentifier.DialogHandler);
-  const userService = useIOC(IOCIdentifier.UserServiceInterface);
-  const routeService = useIOC(IOCIdentifier.RouteServiceInterface);
-  const breakpoint = useBreakpoint();
-  const tTitle = t(AUTH_LOGOUT_DIALOG_TITLE);
-  const tContent = t(AUTH_LOGOUT_DIALOG_CONTENT);
-
-  const onClick = useCallback(() => {
-    dialogHandler.confirm({
-      title: tTitle,
-      okButtonProps: {
-        'data-testid': 'LogoutButton-OkButton'
-      },
-      cancelButtonProps: {
-        'data-testid': 'LogoutButton-CancelButton'
-      },
-      content: tContent,
-      onOk: async () => {
-        await userService.logout();
-        routeService.reset();
-        routeService.gotoLogin();
-      }
-    });
-  }, [tTitle, tContent]);
-
-  if (breakpoint.md) {
-    return (
-      <Button data-testid="LogoutButton" danger onClick={onClick}>
-        {tTitle}
-      </Button>
-    );
-  }
-
-  return (
-    <span
-      data-testid="LogoutButton"
-      className="text-text hover:text-red-500 cursor-pointer text-lg transition-colors block md:hidden"
-      onClick={onClick}
-    >
-      <LogoutOutlined />
-    </span>
-  );
-}

package/dist/templates/react-app/src/uikit/components/MessageBaseList.tsx

@@ -1,258 +0,0 @@
-import { useFactory, useStore } from '@brain-toolkit/react-kit';
-import { messageBaseListI18n } from '@config/i18n/messageBaseListI18n';
-import { I } from '@config/IOCIdentifier';
-import {
-  MessageSender,
-  MessageSenderExecutor,
-  MessagesStore,
-  MessageStatus,
-  SenderStrategyPlugin,
-  SendFailureStrategy,
-  ThreadUtil
-} from '@qlover/corekit-bridge';
-import { Button, Input } from 'antd';
-import { random } from 'lodash';
-import { useCallback, useMemo, useState } from 'react';
-import { useI18nInterface } from '../hooks/useI18nInterface';
-import { useIOC } from '../hooks/useIOC';
-import type {
-  GatewayOptions,
-  MessageGetwayInterface,
-  MessageInterface,
-  MessagesStateInterface,
-  MessageStoreMsg
-} from '@qlover/corekit-bridge';
-
-interface MessageBaseMsg extends MessageStoreMsg<string, unknown> {}
-
-function createMessagesState(): MessagesStateInterface<MessageBaseMsg> {
-  return {
-    messages: []
-  };
-}
-
-class MessageBaseApi implements MessageGetwayInterface {
-  /**
-   * @override
-   */
-  public async sendMessage<M extends MessageInterface<unknown>>(
-    message: M,
-    options?: GatewayOptions<M>
-  ): Promise<unknown | M> {
-    const times = random(200, 1000);
-
-    await ThreadUtil.sleep(times);
-
-    const messageContent = (message as any).content ?? '';
-    if (messageContent.includes('Failed') || messageContent.includes('error')) {
-      const error = new Error('Failed to send message');
-      await options?.onError?.(error);
-      throw error;
-    }
-
-    if (times % 5 === 0) {
-      const error = new Error(`Network error(${times})`);
-      await options?.onError?.(error);
-      throw error;
-    }
-
-    // Return object response to demonstrate formatting
-    const result = {
-      status: 'success',
-      timestamp: new Date().toISOString(),
-      delay: `${times}ms`,
-      echo: messageContent,
-      data: {
-        message: 'Message received successfully',
-        processed: true,
-        metadata: {
-          length: messageContent?.length || 0,
-          type: 'text'
-        }
-      }
-    };
-
-    options?.onComplete?.(message);
-
-    return result;
-  }
-}
-
-export function MessageBaseList() {
-  const [inputValue, setInputValue] = useState('');
-  const logger = useIOC(I.Logger);
-  const tt = useI18nInterface(messageBaseListI18n);
-  const messagesStore = useFactory(
-    MessagesStore<MessageBaseMsg>,
-    createMessagesState
-  );
-  const messageBaseApi = useFactory(MessageBaseApi);
-
-  const [messagesSender] = useState(() =>
-    new MessageSender<MessageBaseMsg>(messagesStore, {
-      gateway: messageBaseApi,
-      logger,
-      executor: new MessageSenderExecutor()
-    }).use(new SenderStrategyPlugin(SendFailureStrategy.KEEP_FAILED))
-  );
-
-  const messages = useStore(messagesStore, (state) => state.messages);
-
-  const loadingMessage = useMemo(() => {
-    return messages.find((message) => message.loading);
-  }, [messages]);
-
-  const onSend = useCallback(() => {
-    messagesSender.send({
-      content: inputValue
-    });
-    setInputValue('');
-  }, [inputValue, messagesSender]);
-
-  /**
-   * Render message result with proper formatting
-   * - For objects/arrays: display as formatted JSON
-   * - For strings: display as plain text
-   */
-  const renderResult = (result: unknown) => {
-    if (!result) return null;
-
-    // Check if result is an object or array
-    if (typeof result === 'object') {
-      try {
-        const jsonString = JSON.stringify(result, null, 2);
-        return (
-          <pre
-            data-testid="MessageResultJson"
-            className="text-xs font-mono bg-green-100 p-2 rounded mt-1 overflow-x-auto whitespace-pre-wrap"
-          >
-            {jsonString}
-          </pre>
-        );
-      } catch {
-        return String(result);
-      }
-    }
-
-    // For strings and other primitives
-    return <span data-testid="MessageResultText">{String(result)}</span>;
-  };
-
-  return (
-    <div data-testid="MessageBaseList" className="max-w-4xl mx-auto">
-      {/* Page Title */}
-      <div className="mb-6">
-        <h1 className="text-2xl font-bold text-text mb-2">{tt.title}</h1>
-        <p className="text-sm text-text-secondary">{tt.description}</p>
-      </div>
-
-      {/* Messages Container */}
-      <div className="bg-secondary rounded-lg shadow-sm border border-primary mb-4">
-        <div
-          data-testid="MessageBaseListItems"
-          className="flex flex-col gap-3 p-4 max-h-96 min-h-64 overflow-y-auto"
-        >
-          {messages.length === 0 ? (
-            <div className="flex items-center justify-center h-full text-text-secondary">
-              <div className="text-center">
-                <p className="text-base mb-1">{tt.noMessages}</p>
-                <p className="text-sm">{tt.getStarted}</p>
-              </div>
-            </div>
-          ) : (
-            messages.map((message) => (
-              <div
-                key={message.id}
-                data-testid="MessageBaseListItem"
-                className="space-y-2"
-              >
-                {/* User Message */}
-                <div className="flex justify-end">
-                  <div className="max-w-[70%] bg-blue-500 text-white rounded-lg px-4 py-2 shadow-sm">
-                    <div className="text-sm font-medium mb-1">{tt.user}</div>
-                    <div className="wrap-break-word">{message.content}</div>
-                  </div>
-                </div>
-
-                {/* Gateway Response */}
-                <div className="flex justify-start">
-                  <div className="max-w-[70%]">
-                    {message.loading ? (
-                      <div className="bg-base rounded-lg px-4 py-2 shadow-sm border border-primary">
-                        <div className="text-sm font-medium text-text-secondary mb-1">
-                          {tt.gateway}
-                        </div>
-                        <div className="flex items-center gap-2 text-text-secondary">
-                          <div className="flex gap-1">
-                            <span
-                              className="animate-bounce inline-block w-1.5 h-1.5 bg-text-secondary rounded-full"
-                              style={{ animationDelay: '0ms' }}
-                            ></span>
-                            <span
-                              className="animate-bounce inline-block w-1.5 h-1.5 bg-text-secondary rounded-full"
-                              style={{ animationDelay: '150ms' }}
-                            ></span>
-                            <span
-                              className="animate-bounce inline-block w-1.5 h-1.5 bg-text-secondary rounded-full"
-                              style={{ animationDelay: '300ms' }}
-                            ></span>
-                          </div>
-                          <span className="text-sm">{tt.processing}</span>
-                        </div>
-                      </div>
-                    ) : message.status === MessageStatus.FAILED ? (
-                      <div className="bg-red-50 border border-red-200 rounded-lg px-4 py-2 shadow-sm">
-                        <div className="text-sm font-medium text-red-800 mb-1">
-                          {tt.gatewayFailed}
-                        </div>
-                        <div className="text-red-600 text-sm">
-                          ❌ {(message as any).error?.message || tt.sendFailed}
-                        </div>
-                      </div>
-                    ) : message.result ? (
-                      <div className="bg-green-50 border border-green-200 rounded-lg px-4 py-2 shadow-sm">
-                        <div className="text-sm font-medium text-green-800 mb-1">
-                          ✓ {tt.gatewayResponse}
-                        </div>
-                        <div className="text-green-900">
-                          {renderResult(message.result)}
-                        </div>
-                      </div>
-                    ) : null}
-                  </div>
-                </div>
-              </div>
-            ))
-          )}
-        </div>
-      </div>
-
-      {/* Input Area */}
-      <div className="bg-secondary rounded-lg shadow-sm border border-primary p-4">
-        <div className="flex gap-2">
-          <Input
-            value={inputValue}
-            onPressEnter={onSend}
-            onChange={(e) =>
-              setInputValue((e.target as HTMLInputElement).value)
-            }
-            placeholder={tt.inputPlaceholder}
-            size="large"
-            className="flex-1"
-            disabled={loadingMessage?.loading}
-          />
-          <Button
-            disabled={!inputValue || loadingMessage?.loading}
-            loading={loadingMessage?.loading}
-            type="primary"
-            size="large"
-            onClick={onSend}
-          >
-            {tt.sendButton}
-          </Button>
-        </div>
-        <div className="mt-2 text-xs text-text-secondary">{tt.errorTip}</div>
-      </div>
-    </div>
-  );
-}