@qlover/create-app 1.1.0 → 2.0.0

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

@@ -1,118 +0,0 @@
-'use client';
-
-import {
-  EditOutlined,
-  CheckOutlined,
-  CloseOutlined,
-  LoadingOutlined
-} from '@ant-design/icons';
-import { Button, Input } from 'antd';
-import { clsx } from 'clsx';
-import { useState, useRef, useEffect } from 'react';
-import type { InputRef } from 'antd/lib/input';
-
-interface EditableCellProps {
-  value: string;
-  className?: string;
-  onSave?: (value: string) => Promise<unknown> | unknown;
-}
-
-export const EditableCell: React.FC<EditableCellProps> = ({
-  value,
-  className,
-  onSave
-}) => {
-  const [editing, setEditing] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [inputValue, setInputValue] = useState(value);
-  const inputRef = useRef<InputRef>(null);
-
-  useEffect(() => {
-    if (editing) {
-      inputRef.current?.focus();
-    }
-  }, [editing]);
-
-  const handleEdit = () => {
-    if (loading) return;
-    setEditing(true);
-    setInputValue(value);
-  };
-
-  const handleSave = async () => {
-    if (loading) return;
-    if (onSave && inputValue !== value) {
-      setLoading(true);
-      try {
-        await onSave(inputValue);
-        setEditing(false);
-      } catch (error) {
-        console.error(error);
-      } finally {
-        setLoading(false);
-      }
-    }
-  };
-
-  const handleCancel = () => {
-    if (loading) return;
-    setEditing(false);
-    setInputValue(value);
-  };
-
-  if (editing) {
-    return (
-      <div
-        data-testid="EditableCellContainer"
-        className="flex w-full items-center"
-      >
-        <Input
-          data-testid="EditableCellInput"
-          disabled={loading}
-          ref={inputRef}
-          value={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
-          onPressEnter={handleSave}
-          onBlur={handleSave}
-        />
-        <div data-testid="EditableCellActions" className="flex gap-0.5 ">
-          <Button
-            disabled={loading}
-            className="cursor-pointer flex items-center justify-center w-5 h-5 rounded hover:bg-gray-100 text-gray-400 hover:text-blue-500 transition-colors"
-            onClick={handleSave}
-          >
-            {loading ? <LoadingOutlined /> : <CheckOutlined />}
-          </Button>
-          <Button
-            disabled={loading}
-            className="cursor-pointer flex items-center justify-center w-5 h-5 rounded hover:bg-gray-100 text-gray-400 hover:text-blue-500 transition-colors"
-            onClick={handleCancel}
-          >
-            <CloseOutlined />
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      data-testid="EditableCellSpan"
-      className={clsx(
-        'group flex items-center relative py-0.5 px-1 w-full max-w-48',
-        className
-      )}
-      onDoubleClick={handleEdit}
-    >
-      <span title={value} className="truncate flex-1">
-        {value}
-      </span>
-      <span
-        onClick={handleEdit}
-        className="opacity-0 group-hover:opacity-100 transition-opacity duration-200 cursor-pointer ml-2 text-gray-400 hover:text-blue-500"
-      >
-        <EditOutlined className="text-sm" />
-      </span>
-    </div>
-  );
-};

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

@@ -1,13 +0,0 @@
-interface FeatureItemProps {
-  icon: string;
-  text: string;
-}
-
-export function FeatureItem({ icon, text }: FeatureItemProps) {
-  return (
-    <div data-testid="FeatureItem" className="flex items-start gap-4">
-      <div className="text-2xl">{icon}</div>
-      <p className="text-text-secondary">{text}</p>
-    </div>
-  );
-}

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

@@ -1,34 +0,0 @@
-'use client';
-
-import { useMemo } from 'react';
-import { appConfig } from '@/core/globals';
-import { clientIOC, IOCContext, IOCInstance } from '../context/IOCContext';
-
-export function IOCProvider(props: { children: React.ReactNode }) {
-  /**
-   * 加载组件就立即注册
-   *
-   * 这样在渲染子组件时保证 IOC.get 正常工作
-   *
-   * 但是这样会导致注册时无法传递浏览器端的依赖, 比如 window.location.pathname
-   *
-   * - 如果有需要，可以将注册放在下面 useStrictEffect 中, 然后 IocMounted=true 时在渲染子节点
-   *
-   * **但是这样会有一个问题, 组件会重新挂载渲染，当切换语言时会闪烁**
-   *
-   * 因为页面初始化时有些组件可能已经使用了容器注入，这样就会丢失注册的依赖
-   *
-   * TODO: 这是一个需要解决的问题
-   */
-  useMemo(() => {
-    clientIOC.register({
-      appConfig: appConfig
-    });
-  }, []);
-
-  return (
-    <IOCContext.Provider value={IOCInstance}>
-      {props.children}
-    </IOCContext.Provider>
-  );
-}

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

@@ -1,50 +0,0 @@
-import Link from 'next/link';
-import { useLocaleRoutes } from '@config/common';
-import { i18nConfig } from '@config/i18n';
-import type { LinkProps } from 'next/link';
-import type { ReactNode } from 'react';
-
-interface LocaleLinkProps
-  extends Omit<LinkProps, 'href'>, React.HTMLAttributes<HTMLAnchorElement> {
-  href:
-    | string
-    | {
-        pathname: string;
-        query?: Record<string, string>;
-        hash?: string;
-      };
-  locale?: string;
-  title: string;
-  children: ReactNode;
-  defaultLocale?: string;
-  className?: string;
-}
-
-export const LocaleLink: React.FC<LocaleLinkProps> = ({
-  href,
-  locale,
-  children,
-  defaultLocale,
-  ...props
-}) => {
-  locale = locale || i18nConfig.fallbackLng;
-
-  const isDefaultLocale = locale === defaultLocale;
-  const shouldAddLocale = useLocaleRoutes && !isDefaultLocale;
-
-  let localizedHref: typeof href;
-  if (typeof href === 'string') {
-    localizedHref = shouldAddLocale ? `/${locale}${href}` : href;
-  } else {
-    localizedHref = {
-      ...href,
-      pathname: shouldAddLocale ? `/${locale}${href.pathname}` : href.pathname
-    };
-  }
-
-  return (
-    <Link data-testid="locale-link" {...props} href={localizedHref}>
-      {children}
-    </Link>
-  );
-};

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

@@ -1,17 +0,0 @@
-export function With<T>(props: {
-  fallback?: React.ReactNode;
-  it: T;
-  children: React.ReactNode | ((it: NonNullable<T>) => React.ReactNode);
-}) {
-  const { fallback, it, children } = props;
-
-  if (it != null && it !== false) {
-    if (typeof children === 'function') {
-      return children(it as NonNullable<T>);
-    }
-
-    return children;
-  }
-
-  return fallback ?? null;
-}

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

@@ -1,62 +0,0 @@
-import { UploadOutlined } from '@ant-design/icons';
-import { Button, Upload, Popover } from 'antd';
-import type { LocaleType } from '@config/i18n';
-import { i18nConfig } from '@config/i18n';
-import css from './import.module.css';
-import type { LocalesImportEvent } from './LocalesImportEvent';
-
-interface LocalesImportButtonProps {
-  event: LocalesImportEvent;
-  title: string;
-  tt: {
-    [key in LocaleType]: {
-      title: string;
-    };
-  };
-}
-
-export function LocalesImportButton({
-  event,
-  title,
-  tt
-}: LocalesImportButtonProps) {
-  const importPanel = (
-    <div className="flex flex-col gap-2">
-      {i18nConfig.supportedLngs.map((key) => {
-        const targetTT = tt[key];
-
-        return (
-          <Upload
-            className={css.uploadRoot}
-            key={key}
-            data-testid={`LocalesImportButton${key}`}
-            accept=".json"
-            maxCount={1}
-            showUploadList={false}
-            beforeUpload={(file) => {
-              event.onImport(key as LocaleType, file);
-              return false;
-            }}
-          >
-            <Button block data-testid="LocalesImportButtonEn">
-              {targetTT.title}
-            </Button>
-          </Upload>
-        );
-      })}
-    </div>
-  );
-
-  return (
-    <Popover
-      data-testid="LocalesImportPopover"
-      content={importPanel}
-      trigger={['click']}
-    >
-      <Button data-testid="LocalesImportButton">
-        <UploadOutlined />
-        {title}
-      </Button>
-    </Popover>
-  );
-}

package/dist/templates/next-app/src/uikit/components/localesImportButton/LocalesImportEvent.ts

@@ -1,28 +0,0 @@
-import { StoreInterface } from '@qlover/corekit-bridge';
-import type { AdminLocalesApi } from '@/base/services/adminApi/AdminLocalesApi';
-import type { LocaleType } from '@config/i18n';
-import type { StoreStateInterface } from '@qlover/corekit-bridge';
-
-export class LocalesImportEventState implements StoreStateInterface {}
-
-export class LocalesImportEvent extends StoreInterface<LocalesImportEventState> {
-  constructor(protected localesApi: AdminLocalesApi) {
-    super(() => new LocalesImportEventState());
-  }
-
-  protected validate(file: File): void {
-    if (file.type !== 'application/json') {
-      throw new Error('File must be a JSON file');
-    }
-  }
-
-  public async onImport(type: LocaleType, file: File): Promise<void> {
-    try {
-      this.validate(file);
-
-      await this.localesApi.import({ [type]: file });
-    } catch (error) {
-      console.log(error);
-    }
-  }
-}

package/dist/templates/next-app/src/uikit/components/localesImportButton/import.module.css

@@ -1,6 +0,0 @@
-.uploadRoot {
-  width: 100%;
-  :global(.ant-upload) {
-    width: 100%;
-  }
-}

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

@@ -1,29 +0,0 @@
-import { TeamOutlined } from '@ant-design/icons';
-import { bootstrapServer } from '@/core/bootstraps/BootstrapServer';
-import { ServerAuth } from '@/server/ServerAuth';
-import { LocaleLink } from '../components/LocaleLink';
-
-export async function AdminButton(props: {
-  adminTitle: string;
-  locale?: string;
-}) {
-  const { adminTitle, locale } = props;
-  const hasAuth = await bootstrapServer.getIOC(ServerAuth).hasAuth();
-
-  if (!hasAuth) {
-    return null;
-  }
-
-  return (
-    <LocaleLink
-      data-testid="AdminButton"
-      key="admin-button"
-      href="/admin"
-      title={adminTitle}
-      locale={locale}
-      className="text-text hover:text-text-hover cursor-pointer text-lg transition-colors"
-    >
-      <TeamOutlined className="text-lg text-text" />
-    </LocaleLink>
-  );
-}

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

@@ -1,17 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-import { NavigateBridge } from '@/base/cases/NavigateBridge';
-import { useRouter } from '@/i18n/routing';
-import { useIOC } from '../hook/useIOC';
-
-export function AppBridge() {
-  const router = useRouter();
-  const navigateBridge = useIOC(NavigateBridge);
-
-  useEffect(() => {
-    navigateBridge.setUIBridge(router);
-  }, [router, navigateBridge]);
-
-  return null;
-}

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

@@ -1,105 +0,0 @@
-import { clsx } from 'clsx';
-import { useLocale } from 'next-intl';
-import { Suspense, type HTMLAttributes } from 'react';
-import { AdminButton } from './AdminButton';
-import { AppBridge } from './AppBridge';
-import { AuthButton } from './AuthButton';
-import { LanguageSwitcher } from './LanguageSwitcher';
-import { ThemeSwitcher } from './ThemeSwitcher';
-import { LocaleLink } from '../components/LocaleLink';
-
-export interface AppRoutePageTT {
-  title: string;
-  adminTitle: string;
-}
-
-export interface AppRoutePageProps extends HTMLAttributes<HTMLDivElement> {
-  showAdminButton?: boolean;
-  mainProps?: HTMLAttributes<HTMLElement>;
-  showAuthButton?: boolean;
-  headerClassName?: string;
-  headerHref?: string;
-  tt: AppRoutePageTT;
-}
-
-/**
- * App Route Page
- *
- * 主要用于 /src/app 目录下页面的基础布局，包含头部、主体内容等
- *
- * @description
- * - /src/app/[locale]/page.tsx
- * - /src/app/[locale]/login/page.tsx
- *
- */
-export function AppRoutePage({
-  children,
-  showAdminButton,
-  mainProps,
-  headerClassName,
-  showAuthButton,
-  tt,
-  headerHref = '/',
-  ...props
-}: AppRoutePageProps) {
-  const locale = useLocale();
-  const adminTitle = tt.adminTitle;
-
-  return (
-    <div
-      data-testid="AppRoutePage"
-      className="flex flex-col min-h-screen"
-      {...props}
-    >
-      <AppBridge />
-      <header
-        data-testid="BaseHeader"
-        className="h-14 bg-secondary border-b border-c-border sticky top-0 z-50"
-      >
-        <div
-          className={clsx(
-            'flex items-center justify-between h-full px-4 mx-auto max-w-7xl',
-            headerClassName
-          )}
-        >
-          <div className="flex items-center">
-            <LocaleLink
-              data-testid="BaseHeaderLogo"
-              title={tt.title}
-              href={headerHref}
-              locale={locale}
-              className="flex items-center hover:opacity-80 transition-opacity"
-            >
-              <span
-                data-testid="base-header-app-name"
-                className="text-lg font-semibold text-text"
-              >
-                {tt.title}
-              </span>
-            </LocaleLink>
-          </div>
-          <div className="flex items-center gap-2 md:gap-4">
-            {showAdminButton && (
-              <Suspense>
-                <AdminButton adminTitle={adminTitle} locale={locale} />
-              </Suspense>
-            )}
-
-            <LanguageSwitcher key="language-switcher" />
-            <ThemeSwitcher key="theme-switcher" />
-
-            {showAuthButton && (
-              <Suspense>
-                <AuthButton />
-              </Suspense>
-            )}
-          </div>
-        </div>
-      </header>
-
-      <main className="flex flex-1 flex-col bg-primary" {...mainProps}>
-        {children}
-      </main>
-    </div>
-  );
-}

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

@@ -1,20 +0,0 @@
-import { bootstrapServer } from '@/core/bootstraps/BootstrapServer';
-import { Link } from '@/i18n/routing';
-import { ServerAuth } from '@/server/ServerAuth';
-import { ROUTE_LOGIN, ROUTE_REGISTER } from '@config/route';
-import { LogoutButton } from './LogoutButton';
-
-export async function AuthButton() {
-  const hasAuth = await bootstrapServer.getIOC(ServerAuth).hasAuth();
-
-  if (hasAuth) {
-    return <LogoutButton data-testid="logout-button" />;
-  }
-
-  return (
-    <div data-testid="AuthButton" className="flex gap-2" data-auth={hasAuth}>
-      <Link href={ROUTE_LOGIN}>Sign in</Link>
-      <Link href={ROUTE_REGISTER}>Sign up</Link>
-    </div>
-  );
-}

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

@@ -1,75 +0,0 @@
-'use client';
-
-import { TranslationOutlined } from '@ant-design/icons';
-import { Dropdown } from 'antd';
-import { useParams } from 'next/navigation';
-import { useLocale } from 'next-intl';
-import { useCallback, useMemo, useTransition } from 'react';
-import { usePathname, useRouter } from '@/i18n/routing';
-import { i18nConfig } from '@config/i18n';
-import type { LocaleType } from '@config/i18n';
-import type { ItemType } from 'antd/es/menu/interface';
-
-export function LanguageSwitcher() {
-  const pathname = usePathname();
-  const router = useRouter();
-  const currentLocale = useLocale() as LocaleType;
-  const [isPending, startTransition] = useTransition();
-  const params = useParams();
-
-  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) => {
-      if (isPending) return;
-
-      startTransition(() => {
-        // @ts-expect-error -- TypeScript will validate that only known `params`
-        // are used in combination with a given `pathname`. Since the two will
-        // always match for the current route, we can skip runtime checks.
-        router.replace({ pathname, params }, { locale: value });
-      });
-    },
-    [pathname, router, isPending, params]
-  );
-
-  const nextLocale = useMemo(() => {
-    const targetIndex = i18nConfig.supportedLngs.indexOf(currentLocale) + 1;
-    return i18nConfig.supportedLngs[
-      targetIndex % i18nConfig.supportedLngs.length
-    ];
-  }, [currentLocale]);
-
-  return (
-    <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-app/LogoutButton.tsx

@@ -1,45 +0,0 @@
-'use client';
-
-import { LogoutOutlined } from '@ant-design/icons';
-import { Tooltip } from 'antd';
-import { useCallback } from 'react';
-import {
-  COMMON_LOGOUT_DIALOG_CONTENT,
-  COMMON_LOGOUT_DIALOG_TITLE
-} from '@config/Identifier';
-import { I } from '@config/IOCIdentifier';
-import { useI18nInterface } from '../hook/useI18nInterface';
-import { useIOC } from '../hook/useIOC';
-
-export function LogoutButton() {
-  const dialogHandler = useIOC(I.DialogHandler);
-  const userService = useIOC(I.UserServiceInterface);
-  const routerService = useIOC(I.RouterServiceInterface);
-
-  const tt = useI18nInterface({
-    title: COMMON_LOGOUT_DIALOG_TITLE,
-    content: COMMON_LOGOUT_DIALOG_CONTENT
-  });
-
-  const onClick = useCallback(() => {
-    dialogHandler.confirm({
-      title: tt.title,
-      content: tt.content,
-      onOk: async () => {
-        await userService.logout();
-        routerService.gotoLogin();
-      }
-    });
-  }, [tt, dialogHandler, userService, routerService]);
-
-  return (
-    <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>
-  );
-}