@4399ywkf/cli 1.0.9 → 2.0.0

package/dist/templates/src/components/FontLoader/index.tsx

@@ -1,41 +0,0 @@
-import React, { memo, useEffect, useRef } from "react";
-
-const createElement = (url: string) => {
-  const element = document.createElement("link");
-  element.rel = "stylesheet";
-  element.href = url;
-  return element;
-};
-
-export interface FontLoaderProps {
-  url: string;
-}
-
-const FontLoader = memo<FontLoaderProps>(({ url }) => {
-  const elementRef = useRef<HTMLLinkElement | null>(null);
-
-  useEffect(() => {
-    // Create and append element
-    const element = createElement(url);
-    document.head.append(element);
-    elementRef.current = element;
-
-    // Optional: Add error handling
-    const handleError = () => console.error(`Failed to load font from ${url}`);
-    element.addEventListener("error", handleError);
-
-    // Cleanup function to remove element when component unmounts
-    // or when url changes
-    return () => {
-      element.removeEventListener("error", handleError);
-      element.remove();
-      elementRef.current = null;
-    };
-  }, [url]);
-
-  return null;
-});
-
-FontLoader.displayName = "FontLoader";
-
-export default FontLoader;

package/dist/templates/src/components/Loading/index.tsx

@@ -1,21 +0,0 @@
-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/src/components/ManualSlave/ManualSlavePage.module.less

@@ -1,25 +0,0 @@
-.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/src/components/ManualSlave/ManualSlavePage.tsx

@@ -1,45 +0,0 @@
-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/src/components/ManualSlave/index.ts

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

package/dist/templates/src/components/RequireAuth/RequireAuth.tsx

@@ -1,76 +0,0 @@
-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/src/components/RequireAuth/index.ts

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

package/dist/templates/src/components/ThemeProvider/GlobalStyle/antdOverride.ts

@@ -1,89 +0,0 @@
-import { Theme, css } from 'antd-style';
-import { readableColor, rgba } from 'polished';
-
-export default (token: Theme) => {
-  const readColor = readableColor(token.colorPrimary);
-  return css`
-    .${token.prefixCls}-checkbox-inner:after {
-      border-color: ${readableColor(token.colorPrimary)} !important;
-    }
-
-    .${token.prefixCls}-btn {
-      box-shadow: none;
-    }
-
-    .${token.prefixCls}-btn-primary:not(:disabled) {
-      color: ${readColor} !important;
-
-      &:hover {
-        color: ${readColor} !important;
-      }
-
-      &:active {
-        color: ${readColor} !important;
-      }
-    }
-
-    .${token.prefixCls}-tooltip-inner {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      min-height: unset;
-      padding-block: 4px;
-      padding-inline: 8px;
-
-      color: ${token.colorBgLayout} !important;
-
-      background-color: ${token.colorText} !important;
-      border-radius: ${token.borderRadiusSM}px !important;
-    }
-
-    .${token.prefixCls}-tooltip-arrow {
-      &::before,
-      &::after {
-        background: ${token.colorText} !important;
-      }
-    }
-
-    .${token.prefixCls}-switch-handle::before {
-      background: ${token.colorBgContainer} !important;
-    }
-
-    .${token.prefixCls}-image-preview-close,
-      .${token.prefixCls}-image-preview-switch-right,
-      .${token.prefixCls}-image-preview-switch-left {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      width: 32px;
-      height: 32px;
-      padding: 0;
-
-      background: ${rgba(token.colorBgMask, 0.1)};
-      border-radius: ${token.borderRadiusLG}px;
-
-      ${token.stylish.blur};
-    }
-
-    .${token.prefixCls}-popover-inner,
-      .${token.prefixCls}-dropdown-menu,
-      .${token.prefixCls}-select-dropdown {
-      border-radius: ${token.borderRadius}px !important;
-      box-shadow:
-        0 0 0 1px ${token.colorFillTertiary},
-        ${token.boxShadowSecondary} !important;
-    }
-
-    .${token.prefixCls}-modal-content {
-      border: 1px solid ${token.colorBorderSecondary} !important;
-    }
-
-    .${token.prefixCls}-radio-wrapper
-      .${token.prefixCls}-radio-checked
-      .${token.prefixCls}-radio-inner:after {
-      background: ${readColor};
-    }
-  `;
-};

package/dist/templates/src/components/ThemeProvider/GlobalStyle/global.ts

@@ -1,61 +0,0 @@
-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/src/components/ThemeProvider/GlobalStyle/index.ts

@@ -1,10 +0,0 @@
-'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/src/components/ThemeProvider/Meta.tsx

@@ -1,75 +0,0 @@
-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/src/components/ThemeProvider/ThemeProvider.tsx

@@ -1,109 +0,0 @@
-import { App } from "antd";
-import {
-  ThemeProvider as AntdThemeProvider,
-  CustomStylishParams,
-  CustomTokenParams,
-  GetAntdTheme,
-} from "antd-style";
-import { merge } from "lodash-es";
-import React, { memo, useCallback, useMemo } from "react";
-
-import { useCdnFn } from "@/components/ConfigProvider";
-import FontLoader from "@/components/FontLoader";
-import { lobeCustomStylish, lobeCustomToken } from "@/styles";
-import { createLobeAntdTheme } from "@/styles/theme/antdTheme";
-import { LobeCustomToken } from "@/types/customToken";
-
-import GlobalStyle from "./GlobalStyle";
-import type { ThemeProviderProps } from "./type";
-
-const ThemeProvider = memo<ThemeProviderProps>(
-  ({
-    children,
-    customStylish,
-    customToken,
-    enableCustomFonts = true,
-    enableGlobalStyle = true,
-    customFonts,
-    customTheme = {},
-    className,
-    style,
-    theme: antdTheme,
-    ...rest
-  }) => {
-    const genCdnUrl = useCdnFn();
-
-    const webfontUrls = useMemo(
-      () =>
-        customFonts || [
-          genCdnUrl({ path: "css/index.css", pkg: "@lobehub/webfont-mono" }),
-          genCdnUrl({
-            path: "css/index.css",
-            pkg: "@lobehub/webfont-harmony-sans",
-          }),
-          genCdnUrl({
-            path: "css/index.css",
-            pkg: "@lobehub/webfont-harmony-sans-sc",
-          }),
-          genCdnUrl({ path: "dist/katex.min.css", pkg: "katex" }),
-        ],
-      [customFonts, genCdnUrl]
-    );
-
-    const stylish = useCallback(
-      (theme: CustomStylishParams) => ({
-        ...lobeCustomStylish(theme),
-        ...customStylish?.(theme),
-      }),
-      [customStylish]
-    );
-
-    const token = useCallback(
-      (theme: CustomTokenParams) => ({
-        ...lobeCustomToken(theme),
-        ...customToken?.(theme),
-      }),
-      [customToken]
-    );
-
-    const theme = useCallback<GetAntdTheme>(
-      (appearance) => {
-        const lobeTheme = createLobeAntdTheme({
-          appearance,
-          neutralColor: customTheme.neutralColor,
-          primaryColor: customTheme.primaryColor,
-        });
-        return merge(lobeTheme, antdTheme);
-      },
-      [customTheme.primaryColor, customTheme.neutralColor, antdTheme]
-    );
-
-    return (
-      <>
-        {enableCustomFonts &&
-          webfontUrls?.length > 0 &&
-          webfontUrls.map((webfont) => (
-            <FontLoader key={webfont} url={webfont} />
-          ))}
-        <AntdThemeProvider<LobeCustomToken>
-          customStylish={stylish}
-          customToken={token}
-          theme={theme}
-          {...rest}
-        >
-          {enableGlobalStyle && <GlobalStyle />}
-          <App
-            className={className}
-            style={{ minHeight: "inherit", width: "inherit", ...style }}
-          >
-            {children}
-          </App>
-        </AntdThemeProvider>
-      </>
-    );
-  }
-);
-
-ThemeProvider.displayName = "LobeThemeProvider";
-
-export default ThemeProvider;

package/dist/templates/src/components/ThemeProvider/index.md

@@ -1,69 +0,0 @@
----
-nav: Components
-group: Theme
-title: ThemeProvider
-description: ThemeProvider is a component that provides a theme to all the child components. It supports theme customization, custom stylish objects, and font loading.
----
-
-## Default
-
-<code src="./demos/index.tsx" center></code>
-
-## Custom Fonts
-
-<code src="./demos/CustomFonts.tsx" center></code>
-
-## APIs
-
-### ThemeProvider
-
-| Property          | Description                            | Type                                                             | Default                         |
-| ----------------- | -------------------------------------- | ---------------------------------------------------------------- | ------------------------------- |
-| children          | Child elements                         | `ReactNode`                                                      | -                               |
-| className         | Custom class name                      | `string`                                                         | -                               |
-| customFonts       | Custom font URLs to load               | `string[]`                                                       | Default Lobe webfonts and KaTeX |
-| customStylish     | Customize stylish objects              | `(theme: CustomStylishParams) => { [key: string]: any }`         | -                               |
-| customTheme       | Customize theme colors                 | `{ neutralColor?: NeutralColors; primaryColor?: PrimaryColors }` | -                               |
-| customToken       | Customize theme tokens                 | `(theme: CustomTokenParams) => { [key: string]: any }`           | -                               |
-| enableCustomFonts | Whether to enable custom fonts loading | `boolean`                                                        | `true`                          |
-| enableGlobalStyle | Whether to enable global style         | `boolean`                                                        | `true`                          |
-| style             | Custom style object                    | `CSSProperties`                                                  | -                               |
-
-ThemeProvider inherits all properties from antd-style's ThemeProvider component, including the common appearance-related properties.
-
-### ThemeProvider Features
-
-The ThemeProvider component provides several key features:
-
-1. **Theming**: Provides consistent theming across components with automatic light/dark mode support
-2. **Global Styles**: Applies base styles including font settings and scrollbar styling
-3. **Font Loading**: Automatically loads Lobe's custom webfonts
-4. **Style Extensions**: Adds utility styles like blur effects, gradients, and animations
-5. **Component Styling**: Enhances Ant Design components with Lobe UI styling
-
-### Customization
-
-The ThemeProvider allows for extensive customization:
-
-```tsx
-import { ThemeProvider } from '@lobehub/ui';
-
-export default () => (
-  <ThemeProvider
-    customTheme={{
-      // Customize primary colors
-      primaryColor: {
-        primary: '#1677ff',
-      },
-      // Customize neutral colors
-      neutralColor: {
-        gray: '#666',
-      },
-    }}
-    // Load custom fonts
-    customFonts={['https://fonts.googleapis.com/css2?family=Roboto&display=swap']}
-  >
-    {/* Your application content */}
-  </ThemeProvider>
-);
-```

package/dist/templates/src/components/ThemeProvider/index.ts

@@ -1,3 +0,0 @@
-export { default as Meta } from './Meta';
-export { default } from './ThemeProvider';
-export type * from './type';

package/dist/templates/src/components/ThemeProvider/type.ts

@@ -1,28 +0,0 @@
-import type {
-  ThemeProviderProps as AntdThemeProviderProps,
-  CustomStylishParams,
-  CustomTokenParams,
-} from 'antd-style';
-import type { CSSProperties } from 'react';
-
-import type { NeutralColors, PrimaryColors } from '@/styles';
-
-export interface ThemeProviderProps extends AntdThemeProviderProps<any> {
-  className?: string;
-  customFonts?: string[];
-  customStylish?: (theme: CustomStylishParams) => { [key: string]: any };
-  customTheme?: {
-    neutralColor?: NeutralColors;
-    primaryColor?: PrimaryColors;
-  };
-  customToken?: (theme: CustomTokenParams) => { [key: string]: any };
-  enableCustomFonts?: boolean;
-  enableGlobalStyle?: boolean;
-  style?: CSSProperties;
-}
-
-export interface MetaProps {
-  description?: string;
-  title?: string;
-  withManifest?: boolean;
-}