@4399ywkf/cli 0.0.22 → 1.0.2

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

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

package/dist/templates/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/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/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

package/dist/templates/__mocks__/styleMock.ts

@@ -0,0 +1 @@
+export default {};

package/dist/templates/__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/__tests__/example.test.ts

@@ -0,0 +1,7 @@
+// 假设您有一些工具函数需要测试
+describe('工具函数测试', () => {
+  it('示例测试', () => {
+    const result = 1 + 1;
+    expect(result).toBe(2);
+  });
+});

package/dist/templates/actions.ts

@@ -0,0 +1,23 @@
+import type { StateCreator } from "zustand/vanilla";
+
+import type { UserStore } from "../../store";
+import type { AnimationMode, ThemeMode } from "./initialState";
+
+export interface UserSettingsAction {
+  setAnimationMode: (animationMode: AnimationMode) => void;
+  setThemeMode: (themeMode: ThemeMode) => void;
+}
+
+export const createSettingsSlice: StateCreator<
+  UserStore,
+  [["zustand/devtools", never]],
+  [],
+  UserSettingsAction
+> = (set, get) => ({
+  setAnimationMode: (animationMode: AnimationMode) => {
+    set({ animationMode });
+  },
+  setThemeMode: (themeMode: ThemeMode) => {
+    set({ themeMode });
+  },
+});

package/dist/templates/algorithms/darkAlgorithm.ts

@@ -0,0 +1,47 @@
+import { MappingAlgorithm } from "antd/es/theme/interface";
+
+import { colorScales } from "@/color/colors";
+import { neutralColorScales } from "@/color/neutrals";
+import type { ColorScaleItem } from "@/color/types";
+
+import { NeutralColors, PrimaryColors } from "../../customTheme";
+import {
+  generateColorNeutralPalette,
+  generateColorPalette,
+} from "../generateColorPalette";
+import darkBaseToken from "../token/dark";
+
+export const darkAlgorithm: MappingAlgorithm = (seedToken, mapToken) => {
+  const primaryColor = (seedToken as any).primaryColor as PrimaryColors;
+  const neutralColor = (seedToken as any).neutralColor as NeutralColors;
+
+  let primaryTokens = {};
+  let neutralTokens = {};
+
+  // generate primary color Token with colorPrimary
+  const primaryScale: ColorScaleItem = colorScales[primaryColor];
+
+  if (primaryScale) {
+    primaryTokens = generateColorPalette({
+      appearance: "dark",
+      scale: primaryScale,
+      type: "Primary",
+    });
+  }
+
+  // generate neutral color Token with colorBgBase
+  const neutralScale = neutralColorScales[neutralColor];
+  if (neutralScale) {
+    neutralTokens = generateColorNeutralPalette({
+      appearance: "dark",
+      scale: neutralScale,
+    });
+  }
+
+  return {
+    ...mapToken!,
+    ...darkBaseToken,
+    ...primaryTokens,
+    ...neutralTokens,
+  };
+};

package/dist/templates/algorithms/lightAlgorithm.ts

@@ -0,0 +1,44 @@
+import { MappingAlgorithm } from "antd/es/theme/interface";
+
+import { colorScales } from "@/color/colors";
+import { neutralColorScales } from "@/color/neutrals";
+import type { ColorScaleItem } from "@/color/types";
+
+import { NeutralColors, PrimaryColors } from "../../customTheme";
+import {
+  generateColorNeutralPalette,
+  generateColorPalette,
+} from "../generateColorPalette";
+import lightBaseToken from "../token/light";
+
+export const lightAlgorithm: MappingAlgorithm = (seedToken, mapToken) => {
+  const primaryColor = (seedToken as any).primaryColor as PrimaryColors;
+  const neutralColor = (seedToken as any).neutralColor as NeutralColors;
+
+  let primaryTokens = {};
+  let neutralTokens = {};
+  const primaryScale: ColorScaleItem = colorScales[primaryColor];
+
+  if (primaryScale) {
+    primaryTokens = generateColorPalette({
+      appearance: "light",
+      scale: primaryScale,
+      type: "Primary",
+    });
+  }
+
+  const neutralScale = neutralColorScales[neutralColor];
+  if (neutralScale) {
+    neutralTokens = generateColorNeutralPalette({
+      appearance: "light",
+      scale: neutralScale,
+    });
+  }
+
+  return {
+    ...mapToken!,
+    ...lightBaseToken,
+    ...primaryTokens,
+    ...neutralTokens,
+  };
+};

package/dist/templates/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/antdTheme.ts

@@ -0,0 +1,62 @@
+import { ThemeConfig } from "antd";
+import { ThemeAppearance } from "antd-style";
+
+import { NeutralColors, PrimaryColors } from "../customTheme";
+import { darkAlgorithm } from "./algorithms/darkAlgorithm";
+import { lightAlgorithm } from "./algorithms/lightAlgorithm";
+import { baseToken } from "./token/base";
+
+export interface LobeAntdThemeParams {
+  appearance: ThemeAppearance;
+  neutralColor?: NeutralColors;
+  primaryColor?: PrimaryColors;
+}
+
+/**
+ * create A LobeHub Style Antd Theme Object
+ * @param neutralColor
+ * @param appearance
+ * @param primaryColor
+ */
+export const createLobeAntdTheme = ({
+  neutralColor,
+  appearance,
+  primaryColor,
+}: LobeAntdThemeParams): ThemeConfig => {
+  const isDark = appearance === "dark";
+
+  return {
+    algorithm: isDark ? darkAlgorithm : lightAlgorithm,
+    components: {
+      Button: {
+        contentFontSizeSM: 12,
+      },
+      DatePicker: {
+        activeBorderColor: baseToken.colorBorder,
+        hoverBorderColor: baseToken.colorBorder,
+      },
+      Input: {
+        activeBorderColor: baseToken.colorBorder,
+        hoverBorderColor: baseToken.colorBorder,
+      },
+      InputNumber: {
+        activeBorderColor: baseToken.colorBorder,
+        hoverBorderColor: baseToken.colorBorder,
+      },
+      Mentions: {
+        activeBorderColor: baseToken.colorBorder,
+        hoverBorderColor: baseToken.colorBorder,
+      },
+      Select: {
+        activeBorderColor: baseToken.colorBorder,
+        hoverBorderColor: baseToken.colorBorder,
+      },
+    },
+    token: {
+      ...baseToken,
+      // @ts-ignore
+      neutralColor,
+      primaryColor,
+    },
+  };
+};

package/dist/templates/api.ts

@@ -0,0 +1,5 @@
+import request from '@config/request';
+
+export function apiGetV1GatewayProfile(params?: Record<string, any>) {
+  return request.get('/v1/gateway/profile', params);
+}

package/dist/templates/app/.browserslistrc

@@ -0,0 +1,5 @@
+chrome >= 51
+edge >= 15
+firefox >= 54
+safari >= 10
+ios_saf >= 10

package/dist/templates/app/.gitignore.tpl

@@ -0,0 +1,30 @@
+.DS_Store
+
+.pnp
+.pnp.js
+.env.local
+.env.*.local
+.history
+*.log*
+
+node_modules/
+.yarn-integrity
+.pnpm-store/
+*.tsbuildinfo
+.changeset/pre.json
+
+dist/
+coverage/
+release/
+output/
+output_resource/
+log/
+
+.vscode/**/*
+!.vscode/settings.json
+!.vscode/extensions.json
+.idea/
+
+**/*/typings/auto-generated
+
+modern.config.local.*

package/dist/templates/app/.npmrc.tpl

@@ -0,0 +1,2 @@
+registry={{{ registry }}}
+{{{ extraNpmrc }}}

package/dist/templates/app/.nvmrc

@@ -0,0 +1 @@
+v24.11.1

package/dist/templates/app/.vscode/settings.json

@@ -0,0 +1,88 @@
+{
+  "files.associations": {
+    ".code-workspace": "jsonc",
+    ".stylelintrc": "jsonc",
+    "stylelintrc": "jsonc",
+    "README": "markdown"
+  },
+  "search.useIgnoreFiles": true,
+  "search.exclude": {
+    "**/dist": true,
+    "**/*.log": true,
+    "**/*.pid": true,
+    "**/.git": true,
+    "**/node_modules": true
+  },
+  //
+  "editor.rulers": [80, 120],
+  "files.eol": "\n",
+  "files.trimTrailingWhitespace": true,
+  "files.insertFinalNewline": true,
+  //
+  "cSpell.diagnosticLevel": "Hint",
+  "javascript.validate.enable": false,
+  "typescript.validate.enable": true,
+  "css.validate": false,
+  "scss.validate": false,
+  "less.validate": false,
+  "[css]": {
+    "editor.formatOnType": true,
+    "editor.formatOnPaste": true,
+    "editor.formatOnSave": true
+  },
+  "[scss]": {
+    "editor.formatOnType": true,
+    "editor.formatOnPaste": true,
+    "editor.formatOnSave": true
+  },
+  "[less]": {
+    "editor.formatOnType": true,
+    "editor.formatOnPaste": true,
+    "editor.formatOnSave": true
+  },
+  "editor.codeActionsOnSave": {
+    "quickfix.biome": "explicit"
+  },
+  "editor.defaultFormatter": "biomejs.biome",
+  "editor.formatOnSave": true,
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.codeActionsOnSave": {
+      "quickfix.biome": "explicit",
+      "source.organizeImports": "never",
+      "source.organizeImports.biome": "explicit"
+    }
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.codeActionsOnSave": {
+      "quickfix.biome": "explicit",
+      "source.organizeImports": "never",
+      "source.organizeImports.biome": "explicit"
+    }
+  },
+  "[json]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.codeActionsOnSave": {
+      "quickfix.biome": "explicit",
+      "source.organizeImports": "never",
+      "source.organizeImports.biome": "explicit"
+    }
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.codeActionsOnSave": {
+      "quickfix.biome": "explicit",
+      "source.organizeImports": "never",
+      "source.organizeImports.biome": "explicit"
+    }
+  },
+  "emmet.triggerExpansionOnTab": true,
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

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

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

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

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