@4399ywkf/cli 0.0.22 → 1.0.2

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { createStyles } from "antd-style"
+
+
+const useStyles = createStyles(({ token, isDarkMode }) => ({
+  button: {
+    backgroundColor: token.colorPrimary,
+    width: '100px',
+    color: isDarkMode ? token.colorText : "#fff",
+    padding: `${token.paddingXS}px ${token.paddingSM}px`,
+    borderRadius: token.borderRadius,
+    cursor: 'pointer',
+    transition: 'all 0.3s ease',
+
+    '&:hover': {
+      backgroundColor: token.colorPrimaryHover,
+    },
+    '&:active': {
+      backgroundColor: token.colorPrimaryActive,
+    },
+  },
+}));
+
+export default function Base() {
+  const { styles } = useStyles();
+  return (
+    <div className={styles.button}>
+      Base
+      {/* <Button type="primary">antd按钮</Button> */}
+    </div>
+  );
+}

package/dist/templates/indexApi.tsx

@@ -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/indexedDB.ts

@@ -0,0 +1,31 @@
+import { createStore, delMany, getMany, setMany } from 'idb-keyval';
+import type { StorageValue } from 'zustand/middleware';
+
+export const createIndexedDB = <State>(dbName = 'indexedDB') => ({
+  getItem: async <T extends State>(
+    name: string,
+  ): Promise<StorageValue<T> | undefined> => {
+    const [version, state] = await getMany(
+      ['version', 'state'],
+      createStore(dbName, name),
+    );
+
+    if (!state) return undefined;
+
+    return { state, version };
+  },
+  removeItem: async (name: string) => {
+    await delMany(['version', 'state'], createStore(dbName, name));
+  },
+  setItem: async (name: string, state: any, version: number | undefined) => {
+    const store = createStore(dbName, name);
+
+    await setMany(
+      [
+        ['version', version],
+        ['state', state],
+      ],
+      store,
+    );
+  },
+});

package/dist/templates/initialState.ts

@@ -0,0 +1,32 @@
+export type AnimationMode = "disabled" | "agile" | "elegant";
+export type ResponseAnimationStyle = "smooth" | "fadeIn" | "none";
+export type ThemeMode = "auto" | "dark" | "light";
+import type {
+  HighlighterProps,
+  MermaidProps,
+  NeutralColors,
+  PrimaryColors,
+} from "@/styles";
+
+export interface UserSettingsState {
+  animationMode?: AnimationMode;
+  neutralColor?: NeutralColors;
+  primaryColor?: PrimaryColors;
+  fontSize: number;
+  transitionMode?: ResponseAnimationStyle;
+  highlighterTheme?: HighlighterProps["theme"];
+  mermaidTheme?: MermaidProps["theme"];
+
+  themeMode?: ThemeMode;
+}
+
+export const initialState: UserSettingsState = {
+  animationMode: "agile",
+  neutralColor: undefined,
+  primaryColor: undefined,
+  fontSize: 14,
+  transitionMode: "fadeIn",
+  highlighterTheme: "lobe-theme",
+  mermaidTheme: "lobe-theme",
+  themeMode: "auto",
+};

package/dist/templates/jwt/index.ts

@@ -0,0 +1,31 @@
+import Cookies from "universal-cookie";
+
+const accessTokenKey = process.env.COOKIE_NAME;
+
+export default class jwt {
+  static key = accessTokenKey;
+  // 设定访问令牌
+  static setAccessToken(token: {
+    token_type: any;
+    access_token: any;
+    expires_at: number;
+  }) {
+    Cookies.set(
+      accessTokenKey,
+      token ? `${token.token_type} ${token.access_token}` : "",
+      {
+        expires: new Date(token.expires_at * 1000),
+      }
+    );
+  }
+
+  // 获取访问令牌
+  static getAccessToken(accessTokenKey: string) {
+    return Cookies.get(accessTokenKey);
+  }
+
+  // 清空访问令牌
+  static clearAccessToken(accessTokenKey: string) {
+    Cookies.remove(accessTokenKey);
+  }
+}

package/dist/templates/keyMapper.ts

@@ -0,0 +1,57 @@
+import type { HyperStorageOptionsObj } from './type';
+
+export const createKeyMapper = (options: HyperStorageOptionsObj) => {
+  const mapStateKeyToStorageKey = (
+    key: string,
+    mode: keyof HyperStorageOptionsObj = 'localStorage',
+  ) => {
+    const media = options[mode];
+    if (media === false) return key;
+
+    const selectors = media?.selectors;
+    if (!selectors) return key;
+
+    let storageKey: string | undefined;
+
+    for (const selector of selectors) {
+      if (typeof selector === 'string') {
+        if (selector === key) storageKey = key;
+      } else {
+        if (selector[key]) storageKey = selector[key];
+      }
+    }
+
+    return storageKey;
+  };
+
+  const getStateKeyFromStorageKey = (
+    key: string,
+    mode: keyof HyperStorageOptionsObj = 'localStorage',
+  ) => {
+    const media = options[mode];
+    if (media === false) return key;
+
+    const selectors = media?.selectors;
+    if (!selectors) return key;
+
+    let stateKey: string | undefined;
+
+    for (const item of selectors) {
+      // 对象如果是 字符串，直接返回该 item key
+      if (typeof item === 'string') {
+        if (item === key) stateKey = key;
+      } else {
+        for (const [k, v] of Object.entries(item)) {
+          if (v === key) stateKey = k;
+        }
+      }
+    }
+
+    return stateKey;
+  };
+
+  return {
+    getStateKeyFromStorageKey,
+    mapStateKeyToStorageKey,
+  };
+};

package/dist/templates/layout/BaseLayout.tsx

@@ -0,0 +1,15 @@
+import useGlobalStore from '@store/global';
+import { Layout as AntdLayout } from 'antd';
+import React, { useEffect } from 'react';
+import { Outlet } from 'react-router';
+
+const BaseLayout = () => {
+  const layout = useGlobalStore(state => state.layout);
+
+  return (
+    <AntdLayout className="flex !flex-col h-full ">
+      <Outlet />
+    </AntdLayout>
+  );
+};
+export default BaseLayout;

package/dist/templates/layout/ContentFormWrapper.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import styles from './ContentWrapper.module.less';
+
+export const ContentFormWrapper = ({ children }: { children: ReactNode }) => (
+  <div
+    className={`${styles['content-wrapper']} ${styles['content-wrapper-form-container']}`}
+  >
+    {children}
+  </div>
+);

package/dist/templates/layout/ContentWrapper.module.less

@@ -0,0 +1,137 @@
+.content_wrapper {
+  height: calc(100% - 49px);
+  overflow-y: auto;
+  position: relative;
+  width: 100%;
+}
+
+.content-wrapper {
+  position: relative;
+}
+
+.content-wrapper-form-container {
+  background: #fff;
+  height: calc(100vh - 112px);
+  overflow: auto;
+  position: relative;
+  width: 100%;
+
+  .content-wrapper-form {
+    margin-top: 20px;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  .form-footer-layout {
+    position: relative;
+  }
+}
+
+.content-wrapper-list {
+  background-color: var(--contexify-menu-bgColor);
+  border-radius: var(--border-radius-medium);
+  margin: 20px;
+  min-height: calc(100% - 40px);
+  padding: 0 12px;
+
+  .content-wrapper-content {
+    margin-top: 20px;
+  }
+
+  .content-wrapper-title {
+    align-items: center;
+    color: #020814;
+    display: flex;
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 26px;
+  }
+}
+
+.content-wrapper-headerBox {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+
+  &>span:last-child {
+    margin-right: 0;
+  }
+}
+
+:global {
+  .richTableTitle {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}
+
+.content-wrapper-create_header {
+  background: #fff;
+  height: var(--container--form--layout--header-height);
+  width: 100%;
+
+  .content-wrapper-header-table {
+    max-width: 100% !important;
+  }
+
+  .content-wrapper-header {
+    border-bottom: 1px solid #eaedf1;
+    display: flex;
+    align-items: center;
+    height: var(--container--form--layout--header-height);
+    line-height: var(--container--form--layout--header-height);
+    margin: 0 auto;
+    max-width: 1200px;
+
+    .content-wrapper-back_wrapper {
+      align-items: center;
+      display: flex;
+      width: auto;
+
+      .content-wrapper-icon_wrapper {
+        align-items: center;
+        border-radius: 4px;
+        cursor: pointer;
+        display: flex;
+        height: 20px;
+        justify-content: center;
+        line-height: 20px;
+        transition: background 0.3s;
+        width: 20px;
+      }
+
+      .content-wrapper-title {
+        color: #020814;
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 26px;
+        margin-left: 4px;
+      }
+    }
+  }
+}
+
+.form-wrapper-footer_wrapper {
+  background: #fff;
+  border-top: 1px solid #e5e6eb;
+  bottom: 0;
+  height: 64px;
+  position: fixed;
+  width: 100%;
+  z-index: 100;
+
+  .form-wrapper-footer {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: flex-start;
+    margin: 0 auto;
+    max-width: 100vw;
+    padding: 0 20px;
+    width: 100%;
+    gap: 8px;
+  }
+}

package/dist/templates/layout/ContentWrapper.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import styles from './ContentWrapper.module.less';
+
+export const ContentWrapper = ({ children }: { children: ReactNode }) => (
+  <div className={styles.content_wrapper}>
+    <div
+      className={`${styles['content-wrapper']} ${styles['content-wrapper-list']}`}
+    >
+      {children}
+    </div>
+  </div>
+);

package/dist/templates/layout/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/layout/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;