@4399ywkf/cli 0.0.22 → 1.0.3

package/dist/templates/GlobalStyle/global.ts

@@ -0,0 +1,61 @@
+import { Theme, css } from 'antd-style';
+
+export default (token: Theme) => css`
+  :root {
+    --font-settings: 'cv01', 'tnum', 'kern';
+    --font-variations: 'opsz' auto, tabular-nums;
+  }
+
+  html {
+    overscroll-behavior: none;
+    color-scheme: ${token.isDarkMode ? 'dark' : 'light'};
+  }
+
+  body {
+    overflow: hidden auto;
+
+    min-height: 100vh;
+    margin: 0;
+    padding: 0;
+
+    font-family: ${token.fontFamily};
+    font-size: ${token.fontSize}px;
+    font-feature-settings: var(--font-settings);
+    font-variation-settings: var(--font-variations);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: 1;
+    color: ${token.colorTextBase};
+    text-size-adjust: none;
+    text-rendering: optimizelegibility;
+    word-wrap: break-word;
+    vertical-align: baseline;
+
+    background-color: ${token.colorBgLayout};
+
+    -webkit-overflow-scrolling: touch;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  code {
+    font-family: ${token.fontFamilyCode} !important;
+
+    span {
+      font-family: ${token.fontFamilyCode} !important;
+    }
+  }
+
+  ::selection {
+    color: #000;
+    background: ${token.yellow9};
+
+    -webkit-text-fill-color: unset !important;
+  }
+
+  * {
+    scrollbar-color: ${token.colorFill} transparent;
+    scrollbar-width: thin;
+    box-sizing: border-box;
+    vertical-align: baseline;
+  }
+`;

package/dist/templates/GlobalStyle/index.ts

@@ -0,0 +1,10 @@
+'use client';
+
+import { createGlobalStyle } from 'antd-style';
+
+import antdOverride from './antdOverride';
+import global from './global';
+
+const GlobalStyle = createGlobalStyle(({ theme }) => [global(theme), antdOverride(theme)]);
+
+export default GlobalStyle;

package/dist/templates/Loading/__tests__/Loading.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Loading from '../index';
+
+describe('Loading Component', () => {
+  test('renders loading container', () => {
+    render(<Loading />);
+    const container = screen.getByTestId('loading-container');
+    expect(container).toBeInTheDocument();
+  });
+
+  test('renders loading spinner', () => {
+    render(<Loading />);
+    const spinner = screen.getByTestId('loading-spinner');
+    expect(spinner).toBeInTheDocument();
+  });
+
+  test('spinner has animation class', () => {
+    render(<Loading />);
+    const spinner = screen.getByTestId('loading-spinner');
+    expect(spinner).toHaveClass('animate-spin');
+  });
+});

package/dist/templates/Loading/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const Loading = () => {
+  return (
+    <div className='flex flex-row items-center justify-center p-8 min-h-[200px] absolute inset-0' data-testid='loading-container'>
+      <div className='inline-flex cursor-not-allowed items-center rounded-md px-4 py-2 text-sm leading-6 font-semibold text-blue-600 transition duration-150 ease-in-out'>
+        <svg className='mr-3 -ml-1 size-5 animate-spin text-blue-500' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' data-testid='loading-spinner'>
+          <circle className='opacity-25' cx='12' cy='12' r='10' stroke='currentColor' strokeWidth={4}></circle>
+          <path
+            className='opacity-75'
+            fill='currentColor'
+            d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
+          ></path>
+        </svg>
+        {/* Processing… */}
+      </div>
+    </div>
+  );
+};
+
+export default Loading;

package/dist/templates/Loading.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Loading from '../index';
+
+describe('Loading Component', () => {
+  test('renders loading container', () => {
+    render(<Loading />);
+    const container = screen.getByTestId('loading-container');
+    expect(container).toBeInTheDocument();
+  });
+
+  test('renders loading spinner', () => {
+    render(<Loading />);
+    const spinner = screen.getByTestId('loading-spinner');
+    expect(spinner).toBeInTheDocument();
+  });
+
+  test('spinner has animation class', () => {
+    render(<Loading />);
+    const spinner = screen.getByTestId('loading-spinner');
+    expect(spinner).toHaveClass('animate-spin');
+  });
+});

package/dist/templates/Locale.tsx

@@ -0,0 +1,89 @@
+import { ConfigProvider } from 'antd';
+import type { Locale as AntdLocale } from 'antd/es/locale';
+import dayjs from 'dayjs';
+import React, {
+  type PropsWithChildren,
+  memo,
+  useEffect,
+  useState,
+} from 'react';
+
+import { isRtlLang } from 'rtl-detect';
+
+import { createI18nNext } from '@/locales/create';
+import { getAntdLocale } from '@/utils/locale';
+
+const updateDayjs = async (lang: string) => {
+  // load default lang
+  let dayJSLocale: any;
+  try {
+    // dayjs locale is using `en` instead of `en-US`
+    // refs: https://github.com/lobehub/lobe-chat/issues/3396
+    const locale = lang.toLowerCase() === 'en-us' ? 'en' : lang.toLowerCase();
+
+    dayJSLocale = await import(`dayjs/locale/${locale}.js`);
+  } catch {
+    console.warn(`dayjs locale for ${lang} not found, fallback to en`);
+    dayJSLocale = await import('dayjs/locale/en.js');
+  }
+
+  dayjs.locale(dayJSLocale.default);
+};
+
+interface LocaleLayoutProps extends PropsWithChildren {
+  antdLocale?: unknown;
+  defaultLang?: string;
+}
+
+const Locale = memo<LocaleLayoutProps>(
+  ({ children, defaultLang, antdLocale }) => {
+    const [i18n] = useState(createI18nNext(defaultLang));
+    const [lang, setLang] = useState(defaultLang);
+    const [locale, setLocale] = useState(antdLocale);
+
+    console.log(antdLocale, defaultLang);
+
+    // if on browser side, init i18n instance only once
+    if (!i18n.instance.isInitialized)
+      // console.debug('locale', lang);
+      i18n.init().then(async () => {
+        if (!lang) return;
+
+        await updateDayjs(lang);
+      });
+
+    // handle i18n instance language change
+    useEffect(() => {
+      const handleLang = async (lng: string) => {
+        setLang(lng);
+
+        if (lang === lng) return;
+
+        const newLocale = await getAntdLocale(lng);
+        setLocale(newLocale);
+
+        await updateDayjs(lng);
+      };
+
+      i18n.instance.on('languageChanged', handleLang);
+      return () => {
+        i18n.instance.off('languageChanged', handleLang);
+      };
+    }, [i18n, lang]);
+
+    // detect document direction
+    const documentDir = isRtlLang(lang) ? 'rtl' : 'ltr';
+
+    console.log(documentDir, locale);
+
+    return (
+      <ConfigProvider direction={documentDir} locale={locale as AntdLocale}>
+        {children}
+      </ConfigProvider>
+    );
+  },
+);
+
+Locale.displayName = 'Locale';
+
+export default Locale;

package/dist/templates/MainContentWrap.tsx

@@ -0,0 +1,68 @@
+import { ConfigProvider, theme } from 'antd';
+import type { Locale as AntdLocale } from 'antd/es/locale';
+import React, { useState, useEffect } from 'react';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Outlet } from 'react-router';
+import '../index.css';
+import { DEFAULT_LANG } from '@/const/locale';
+import { useRouteTitle } from '@/hooks/useRouteTitle';
+import { getAntdLocale } from '@/utils/locale';
+import queryString from 'query-string';
+import Locale from './Locale';
+import AppTheme from './ThemeContext';
+
+export const MainContentWrap = () => {
+  useRouteTitle();
+  const [antdLocale, setAntdLocale] = useState<unknown>(null);
+  const [isLocaleLoaded, setIsLocaleLoaded] = useState(false);
+
+  const { lang } = queryString.parse(location.search);
+
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+        gcTime: 0,
+      },
+    },
+  });
+
+  useEffect(() => {
+    const loadLocale = async () => {
+      try {
+        const loadedLocale = await getAntdLocale(
+          (lang as string) ?? DEFAULT_LANG,
+        );
+        setAntdLocale(loadedLocale);
+      } catch (error) {
+        console.error('Failed to load locale:', error);
+        // 保持默认的中文 locale
+      } finally {
+        setIsLocaleLoaded(true);
+      }
+    };
+
+    loadLocale();
+  }, [lang]);
+
+  // 可以添加一个加载状态
+  if (!isLocaleLoaded) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <AppTheme>
+      <Locale
+        antdLocale={antdLocale}
+        defaultLang={lang ? (lang as string) : DEFAULT_LANG}
+      >
+        <QueryClientProvider client={queryClient}>
+          <Outlet />
+        </QueryClientProvider>
+      </Locale>
+    </AppTheme>
+  );
+};
+
+export default MainContentWrap;

package/dist/templates/ManualSlave/ManualSlavePage.module.less

@@ -0,0 +1,25 @@
+.micro-container {
+  position: relative;
+  height: 100%;
+  width: 100%;
+
+  :global {
+    div[id*="garfish_app_for"] {
+      position: relative;
+      height: 100%;
+      width: 100%;
+    }
+
+    div[__garfishmockhtml__] {
+      position: relative;
+      height: 100%;
+      width: 100%;
+    }
+
+    div[__garfishmockbody__] {
+      position: relative;
+      height: 100%;
+      width: 100%;
+    }
+  }
+}

package/dist/templates/ManualSlave/ManualSlavePage.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect } from 'react';
+import { useRouteData } from '@config/router/routeContext';
+import useGlobalStore from '@store/global';
+import Garfish from 'garfish';
+import styles from './ManualSlavePage.module.less';
+import Loading from '@/loading';
+
+let app: any;
+
+const ManualSlavePage = () => {
+  const { route } = useRouteData();
+  let domId = `manual_${route.microApp}`;
+  let basename = `/${route.microApp}`;
+
+  const { microActiveApps } = useGlobalStore();
+
+  const asyncLoadApp = async ({ route }) => {
+    app = await Garfish.loadApp(route.microApp, {
+      cache: true,
+      basename: basename,
+      entry: route.entry,
+      domGetter: `#${domId}`,
+    });
+    await app?.mount();
+  };
+
+  useEffect(() => {
+    if (route.microApp) {
+      asyncLoadApp({ route });
+    }
+    return () => {
+      app.unmount();
+    };
+  }, []);
+
+  let loading = microActiveApps.findIndex((o) => o.loading);
+  return (
+    <>
+      <div id={domId} className={`h-full ${styles['micro-container']}`}></div>
+      {loading !== -1 ? <Loading name={microActiveApps[loading]?.props?.cname ?? ''} /> : undefined}
+    </>
+  );
+};
+
+export default ManualSlavePage;

package/dist/templates/ManualSlave/index.ts

@@ -0,0 +1 @@
+export * from "./ManualSlavePage";

package/dist/templates/ManualSlavePage.module.less

@@ -0,0 +1,25 @@
+.micro-container {
+  position: relative;
+  height: 100%;
+  width: 100%;
+
+  :global {
+    div[id*="garfish_app_for"] {
+      position: relative;
+      height: 100%;
+      width: 100%;
+    }
+
+    div[__garfishmockhtml__] {
+      position: relative;
+      height: 100%;
+      width: 100%;
+    }
+
+    div[__garfishmockbody__] {
+      position: relative;
+      height: 100%;
+      width: 100%;
+    }
+  }
+}

package/dist/templates/ManualSlavePage.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect } from 'react';
+import { useRouteData } from '@config/router/routeContext';
+import useGlobalStore from '@store/global';
+import Garfish from 'garfish';
+import styles from './ManualSlavePage.module.less';
+import Loading from '@/loading';
+
+let app: any;
+
+const ManualSlavePage = () => {
+  const { route } = useRouteData();
+  let domId = `manual_${route.microApp}`;
+  let basename = `/${route.microApp}`;
+
+  const { microActiveApps } = useGlobalStore();
+
+  const asyncLoadApp = async ({ route }) => {
+    app = await Garfish.loadApp(route.microApp, {
+      cache: true,
+      basename: basename,
+      entry: route.entry,
+      domGetter: `#${domId}`,
+    });
+    await app?.mount();
+  };
+
+  useEffect(() => {
+    if (route.microApp) {
+      asyncLoadApp({ route });
+    }
+    return () => {
+      app.unmount();
+    };
+  }, []);
+
+  let loading = microActiveApps.findIndex((o) => o.loading);
+  return (
+    <>
+      <div id={domId} className={`h-full ${styles['micro-container']}`}></div>
+      {loading !== -1 ? <Loading name={microActiveApps[loading]?.props?.cname ?? ''} /> : undefined}
+    </>
+  );
+};
+
+export default ManualSlavePage;

package/dist/templates/Meta.tsx

@@ -0,0 +1,75 @@
+import React, { memo, useCallback } from "react";
+
+import { useCdnFn } from "@/components/ConfigProvider";
+
+import type { MetaProps } from "./type";
+
+const Meta = memo<MetaProps>(
+  ({
+    title = "LobeHub",
+    description = "Empowering your AI dreams with LobeHub",
+    withManifest,
+  }) => {
+    const genCdnUrl = useCdnFn();
+    const genAssets = useCallback(
+      (path: string) =>
+        genCdnUrl({
+          path,
+          pkg: "@lobehub/assets-favicons",
+          version: "latest",
+        }),
+      []
+    );
+    return (
+      <>
+        <link href={genAssets("assets/favicon.ico")} rel="shortcut icon" />
+        <link
+          href={genAssets("assets/apple-touch-icon.png")}
+          rel="apple-touch-icon"
+          sizes="180x180"
+        />
+        <link
+          href={genAssets("assets/favicon-32x32.png")}
+          rel="icon"
+          sizes="32x32"
+          type="image/png"
+        />
+        <link
+          href={genAssets("assets/favicon-16x16.png")}
+          rel="icon"
+          sizes="16x16"
+          type="image/png"
+        />
+        <meta
+          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no"
+          name="viewport"
+        />
+        <meta content={title} name="apple-mobile-web-app-title" />
+        <meta content={title} name="application-name" />
+        <meta content={description} name="description" />
+        <meta content="#000000" name="msapplication-TileColor" />
+        <meta
+          content="#fff"
+          media="(prefers-color-scheme: light)"
+          name="theme-color"
+        />
+        <meta
+          content="#000"
+          media="(prefers-color-scheme: dark)"
+          name="theme-color"
+        />
+        <meta content="yes" name="apple-mobile-web-app-capable" />
+        <meta content={title} name="apple-mobile-web-app-title" />
+        <meta
+          content="black-translucent"
+          name="apple-mobile-web-app-status-bar-style"
+        />
+        {withManifest && (
+          <link href={genAssets("assets/site.webmanifest")} rel="manifest" />
+        )}
+      </>
+    );
+  }
+);
+
+export default Meta;

package/dist/templates/RequireAuth/RequireAuth.tsx

@@ -0,0 +1,76 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router';
+import useGlobalStore from '@store/global';
+import { useRouteData } from '@config/router/routeContext';
+import { Spin } from 'antd';
+import _ from 'lodash-es';
+
+const RequireAuth = (Component: any, props?: { targetPerarr?: string; autoRedirect?: boolean }) => () => {
+  let navigate = useNavigate();
+  const { route } = useRouteData();
+  let targetPerarr: string | undefined = undefined;
+  let autoRedirect: boolean | undefined = undefined;
+  if (props) {
+    autoRedirect = props.autoRedirect;
+    targetPerarr = props.targetPerarr;
+  } else {
+    targetPerarr = route?.props?.perarr;
+  }
+
+  const [isFirst, setIsFirst] = useState<undefined | boolean>(undefined);
+  const getBasicInfo = useGlobalStore((state) => state.getBasicInfo);
+  const navCode = useGlobalStore((state) => state.navCode);
+  const currentUser = useGlobalStore((state) => state.currentUser);
+  const modules = useGlobalStore((state) => state.modules);
+
+  useEffect(() => {
+    getBasicInfo({}).then(() => {
+      setIsFirst(true);
+    });
+  }, []);
+
+  const renderNavigateValue = useCallback(() => {
+    if (_.isEmpty(navCode) && _.isEmpty(currentUser) && _.isEmpty(modules)) {
+      navigate(`/auth`, { replace: true });
+      return;
+    }
+    // 如果有配置权限位，则判断当前权限是否满足
+    if (targetPerarr) {
+      const codeObj = navCode.find((c) => targetPerarr === c);
+      if (codeObj) {
+        return <Component />;
+      } else {
+        navigate(`/unAuth`, { replace: true });
+        return;
+      }
+    }
+    // 如果启动了自动跳转功能，则根据路由权限配置来生成
+    if (autoRedirect) {
+      navCode.forEach((code) => {
+        const codeItem = modules.find((o) => o.perarr === code);
+        if (codeItem && codeItem.defaultroute) {
+          navigate(`/${codeItem.path}${codeItem.defaultroute}`, { replace: true });
+          return;
+        }
+        if (codeItem && codeItem.path) {
+          navigate(`/${codeItem.path}`, { replace: true });
+          return;
+        }
+      });
+    }
+    return <Component />;
+  }, [navCode, currentUser, modules]);
+
+  const renderElement = () => {
+    if (isFirst === undefined) {
+      return <Spin spinning={true}>加载中...</Spin>;
+    }
+    if (isFirst) {
+      return renderNavigateValue();
+    }
+  };
+
+  return renderElement();
+};
+
+export default RequireAuth;

package/dist/templates/RequireAuth/index.ts

@@ -0,0 +1 @@
+export * from "./RequireAuth";

package/dist/templates/RequireAuth.tsx

@@ -0,0 +1,76 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router';
+import useGlobalStore from '@store/global';
+import { useRouteData } from '@config/router/routeContext';
+import { Spin } from 'antd';
+import _ from 'lodash-es';
+
+const RequireAuth = (Component: any, props?: { targetPerarr?: string; autoRedirect?: boolean }) => () => {
+  let navigate = useNavigate();
+  const { route } = useRouteData();
+  let targetPerarr: string | undefined = undefined;
+  let autoRedirect: boolean | undefined = undefined;
+  if (props) {
+    autoRedirect = props.autoRedirect;
+    targetPerarr = props.targetPerarr;
+  } else {
+    targetPerarr = route?.props?.perarr;
+  }
+
+  const [isFirst, setIsFirst] = useState<undefined | boolean>(undefined);
+  const getBasicInfo = useGlobalStore((state) => state.getBasicInfo);
+  const navCode = useGlobalStore((state) => state.navCode);
+  const currentUser = useGlobalStore((state) => state.currentUser);
+  const modules = useGlobalStore((state) => state.modules);
+
+  useEffect(() => {
+    getBasicInfo({}).then(() => {
+      setIsFirst(true);
+    });
+  }, []);
+
+  const renderNavigateValue = useCallback(() => {
+    if (_.isEmpty(navCode) && _.isEmpty(currentUser) && _.isEmpty(modules)) {
+      navigate(`/auth`, { replace: true });
+      return;
+    }
+    // 如果有配置权限位，则判断当前权限是否满足
+    if (targetPerarr) {
+      const codeObj = navCode.find((c) => targetPerarr === c);
+      if (codeObj) {
+        return <Component />;
+      } else {
+        navigate(`/unAuth`, { replace: true });
+        return;
+      }
+    }
+    // 如果启动了自动跳转功能，则根据路由权限配置来生成
+    if (autoRedirect) {
+      navCode.forEach((code) => {
+        const codeItem = modules.find((o) => o.perarr === code);
+        if (codeItem && codeItem.defaultroute) {
+          navigate(`/${codeItem.path}${codeItem.defaultroute}`, { replace: true });
+          return;
+        }
+        if (codeItem && codeItem.path) {
+          navigate(`/${codeItem.path}`, { replace: true });
+          return;
+        }
+      });
+    }
+    return <Component />;
+  }, [navCode, currentUser, modules]);
+
+  const renderElement = () => {
+    if (isFirst === undefined) {
+      return <Spin spinning={true}>加载中...</Spin>;
+    }
+    if (isFirst) {
+      return renderNavigateValue();
+    }
+  };
+
+  return renderElement();
+};
+
+export default RequireAuth;