@4399ywkf/cli 0.0.22 → 1.0.2

package/dist/templates/components/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/components/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/components/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/components/ManualSlave/index.ts

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

package/dist/templates/components/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/components/RequireAuth/index.ts

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

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

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

@@ -0,0 +1,109 @@
+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/components/ThemeProvider/index.md

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

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

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

@@ -0,0 +1,28 @@
+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;
+}

package/dist/templates/config/env/.env.development

@@ -0,0 +1,5 @@
+# 本地开发服务器 地址
+APP_HOST = "127.0.0.1"
+# 本地开发服务器 端口
+APP_PORT = 8888
+PUBLIC_PATH="/"

package/dist/templates/config/env/.env.production

@@ -0,0 +1,2 @@
+SENTRY_ENV="production"
+NODE_ENV="production"

package/dist/templates/config/env/.env.public.tpl

@@ -0,0 +1,31 @@
+API_PREFIX="/api"
+API_TIMEOUT=60 * 1000
+
+COOKIE_NAME='ywkf_jwt'
+
+APP_CNAME='{{{ name }}}'
+APP_NAME='{{{ name }}}'
+OUTPUT_PATH='dist'
+BASENAME='/'
+
+PUBLIC_PATH='/s{{{ name }}}/'
+VERSION_NOTIFY_TIME=30000
+
+
+# Sentry 配置 - (官网)
+# REACT_APP_SENTRY_DSN="https://95add4dc797c22aa2224494e4abd4d71@o4509466151878656.ingest.us.sentry.io/4509466153058304"
+# SENTRY_PROJECT="javascript-react"
+# SENTRY_ORG="test-x6m"
+# SENTRY_AUTH_TOKEN="d477b94cfe375f5b4e4e88ac4fc15a8be8557652cea424710b6f7f19be4f0b3d"
+# SENTRY_URL="https://test-x6m.sentry.io/"
+
+# 帮助中心
+HELP_CENTER_URL="https://im-support.gz4399.com/"
+
+# 是否开启Sentry
+SENTRY_ENABLED='{{SENTRY_ENABLED}}'  
+REACT_APP_SENTRY_DSN='{{SENTRY_DSN}}'
+SENTRY_PROJECT='{{{ name }}}'
+SENTRY_ORG="sentry"
+SENTRY_AUTH_TOKEN="f13c66cd7a3629c8324cceb62fdb65aae1f337abbec4ebbadbe0a22447708994"
+SENTRY_URL="https://sentry.gz4399.com/"