@4399ywkf/cli 1.0.10 → 2.0.0

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

@@ -1,137 +0,0 @@
-.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/app/src/layout/ContentWrapper.tsx

@@ -1,13 +0,0 @@
-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/app/src/layout/GlobalProvider/AppTheme.tsx

@@ -1,136 +0,0 @@
-import ThemeProvider from "@/components/ThemeProvider";
-import { CLOUD_THEME_APPEARANCE } from "@/const/theme";
-import { setCookie } from "@/utils/cookie";
-
-// import { useGlobalStore } from "@store/global";
-import React, { memo, useEffect, type ReactNode } from "react";
-
-import { SYSTEM_PREFIX } from "@/const/system";
-import { GlobalStyle } from "@/styles";
-import { useUserStore } from "@store/user";
-import { createStaticStyles, cx } from "antd-style";
-import HarmonyOS_Sans_Regular from "@public/fonts/HarmonyOS_Sans_Regular.woff2";
-import AntdStaticMethods from "@/components/AntdStaticMethods";
-
-const styles = createStaticStyles(({ css, cssVar }) => ({
-  app: css`
-    position: relative;
-
-    overscroll-behavior: none;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    height: 100%;
-    min-height: 100dvh;
-    max-height: 100dvh;
-
-    @media (min-device-width: 576px) {
-      overflow: hidden;
-    }
-  `,
-  // scrollbar-width and scrollbar-color are supported from Chrome 121
-  // https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
-  scrollbar: css`
-    scrollbar-color: ${cssVar.colorFill} transparent;
-    scrollbar-width: thin;
-
-    #lobe-mobile-scroll-container {
-      scrollbar-width: none;
-
-      ::-webkit-scrollbar {
-        width: 0;
-        height: 0;
-      }
-    }
-  `,
-
-  // so this is a polyfill for older browsers
-  scrollbarPolyfill: css`
-    ::-webkit-scrollbar {
-      width: 0.75em;
-      height: 0.75em;
-    }
-
-    ::-webkit-scrollbar-thumb {
-      border-radius: 10px;
-    }
-
-    :hover::-webkit-scrollbar-thumb {
-      border: 3px solid transparent;
-      background-color: ${cssVar.colorText};
-      background-clip: content-box;
-    }
-
-    ::-webkit-scrollbar-track {
-      background-color: transparent;
-    }
-  `,
-}));
-
-interface AppThemeProps {
-  children: ReactNode;
-}
-
-const AppTheme = memo(({ children }: AppThemeProps) => {
-  const themeMode = useUserStore((s) => s.themeMode);
-  const animationMode = useUserStore((s) => s.animationMode);
-  const neutralColor = useUserStore((s) => s.neutralColor);
-  const primaryColor = useUserStore((s) => s.primaryColor);
-
-  useEffect(() => {
-    // Update data-theme accordingly if user selects light or dark
-    if (themeMode !== "auto") {
-      document.documentElement.dataset.theme = themeMode;
-      return;
-    }
-
-    // For auto mode, we need to watch system preferences
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-
-    // Set initial theme based on system preference
-    document.documentElement.dataset.theme = mediaQuery.matches
-      ? "dark"
-      : "light";
-
-    // Update theme when system preference changes
-    function handleChange(e) {
-      document.documentElement.dataset.theme = e.matches ? "dark" : "light";
-    }
-
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, [themeMode]);
-
-  return (
-    <ThemeProvider
-      prefixCls={SYSTEM_PREFIX}
-      appearance={themeMode !== "auto" ? themeMode : undefined}
-      className={cx(styles.app, styles.scrollbar, styles.scrollbarPolyfill)}
-      customTheme={{
-        neutralColor: neutralColor,
-        primaryColor: primaryColor,
-      }}
-      customFonts={[HarmonyOS_Sans_Regular]}
-      theme={{
-        cssVar: true,
-        token: {
-          motion: animationMode !== "disabled",
-          motionUnit: animationMode === "agile" ? 0.05 : 0.1,
-        },
-      }}
-      themeMode={themeMode}
-      onAppearanceChange={(appearance) => {
-        if (themeMode !== "auto") return;
-
-        setCookie(CLOUD_THEME_APPEARANCE, appearance);
-      }}
-    >
-      {children}
-      <AntdStaticMethods />
-      <GlobalStyle />
-    </ThemeProvider>
-  );
-});
-
-export default AppTheme;

package/dist/templates/app/src/layout/GlobalProvider/Locale.tsx

@@ -1,84 +0,0 @@
-import { ConfigProvider } from 'antd';
-import dayjs from 'dayjs';
-import { 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) => {
-  let dayJSLocale;
-  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?: any;
-  defaultLang?: string;
-}
-
-const Locale = memo<LocaleLayoutProps>(({ children, defaultLang, antdLocale }) => {
-  const [i18n] = useState(() => createI18nNext(defaultLang));
-  const [lang, setLang] = useState(defaultLang);
-  const [locale, setLocale] = useState(antdLocale);
-
-  if (!i18n.instance.isInitialized)
-      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';
-
-  return (
-    <ConfigProvider
-      direction={documentDir}
-      locale={locale}
-      theme={{
-        components: {
-          Button: {
-            contentFontSizeSM: 12,
-          },
-        },
-      }}
-    >
-      {children}
-    </ConfigProvider>
-  );
-});
-
-Locale.displayName = 'Locale';
-
-export default Locale;

package/dist/templates/app/src/layout/GlobalProvider/Query.tsx

@@ -1,12 +0,0 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import React, { type PropsWithChildren, useEffect, useState } from 'react';
-
-const QueryProvider = ({ children }: PropsWithChildren) => {
-  const [queryClient] = useState(() => new QueryClient());
-
-  return (
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-  );
-};
-
-export default QueryProvider;

package/dist/templates/app/src/layout/GlobalProvider/StyleRegistry.tsx

@@ -1,9 +0,0 @@
-import { StyleProvider } from 'antd-style';
-import { type PropsWithChildren } from 'react';
-
-
-const StyleRegistry = ({ children }: PropsWithChildren) => {
-  return <StyleProvider>{children}</StyleProvider>;
-};
-
-export default StyleRegistry;

package/dist/templates/app/src/layout/GlobalProvider/index.tsx

@@ -1,23 +0,0 @@
-import StyleRegistry from "./StyleRegistry";
-import AppTheme from "./AppTheme";
-import QueryProvider from "./Query";
-import Locale from "./Locale";
-import { Outlet } from "react-router";
-
-interface GlobalProviderProps {
-
-}
-
-export default function GlobalProvider({  }: GlobalProviderProps) {
-  return (
-    <StyleRegistry>
-      <Locale>
-        <AppTheme>
-          <QueryProvider>
-            <Outlet />
-          </QueryProvider>
-        </AppTheme>
-      </Locale>
-    </StyleRegistry>
-  );
-}

package/dist/templates/app/src/layout/Locale.tsx

@@ -1,85 +0,0 @@
-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);
-
-    // 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";
-
-    return (
-      <ConfigProvider direction={documentDir} locale={locale as AntdLocale}>
-        {children}
-      </ConfigProvider>
-    );
-  }
-);
-
-Locale.displayName = "Locale";
-
-export default Locale;

package/dist/templates/app/src/layout/MainContentWrap.tsx

@@ -1,64 +0,0 @@
-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 { getAntdLocale } from "@/utils";
-import queryString from "query-string";
-import Locale from "./Locale";
-import AppTheme from "./ThemeContext";
-
-export const MainContentWrap = () => {
-  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/app/src/layout/ThemeContext.tsx

@@ -1,135 +0,0 @@
-import ThemeProvider from "@/components/ThemeProvider";
-import { CLOUD_THEME_APPEARANCE } from "@/const/theme";
-import { setCookie } from "@/utils/cookie";
-
-// import { useGlobalStore } from "@store/global";
-import React, { memo, useEffect, type ReactNode } from "react";
-
-import { SYSTEM_PREFIX } from "@/const/system";
-import { GlobalStyle } from "@/styles";
-import { useUserStore } from "@store/user";
-import { createStyles } from "antd-style";
-import HarmonyOS_Sans_Regular from "@public/fonts/HarmonyOS_Sans_Regular.woff2";
-
-const useStyles = createStyles(({ css, token }) => ({
-  app: css`
-    position: relative;
-
-    overscroll-behavior: none;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    height: 100%;
-    min-height: 100dvh;
-    max-height: 100dvh;
-
-    @media (min-device-width: 576px) {
-      overflow: hidden;
-    }
-  `,
-  // scrollbar-width and scrollbar-color are supported from Chrome 121
-  // https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
-  scrollbar: css`
-    scrollbar-color: ${token.colorFill} transparent;
-    scrollbar-width: thin;
-
-    #lobe-mobile-scroll-container {
-      scrollbar-width: none;
-
-      ::-webkit-scrollbar {
-        width: 0;
-        height: 0;
-      }
-    }
-  `,
-
-  // so this is a polyfill for older browsers
-  scrollbarPolyfill: css`
-    ::-webkit-scrollbar {
-      width: 0.75em;
-      height: 0.75em;
-    }
-
-    ::-webkit-scrollbar-thumb {
-      border-radius: 10px;
-    }
-
-    :hover::-webkit-scrollbar-thumb {
-      border: 3px solid transparent;
-      background-color: ${token.colorText};
-      background-clip: content-box;
-    }
-
-    ::-webkit-scrollbar-track {
-      background-color: transparent;
-    }
-  `,
-}));
-
-interface AppThemeProps {
-  children: ReactNode;
-}
-
-const AppTheme = memo(({ children }: AppThemeProps) => {
-  const themeMode = useUserStore((s) => s.themeMode);
-  const animationMode = useUserStore((s) => s.animationMode);
-  const neutralColor = useUserStore((s) => s.neutralColor);
-  const primaryColor = useUserStore((s) => s.primaryColor);
-  const { styles, cx } = useStyles();
-
-  useEffect(() => {
-    // Update data-theme accordingly if user selects light or dark
-    if (themeMode !== "auto") {
-      document.documentElement.dataset.theme = themeMode;
-      return;
-    }
-
-    // For auto mode, we need to watch system preferences
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-
-    // Set initial theme based on system preference
-    document.documentElement.dataset.theme = mediaQuery.matches
-      ? "dark"
-      : "light";
-
-    // Update theme when system preference changes
-    function handleChange(e) {
-      document.documentElement.dataset.theme = e.matches ? "dark" : "light";
-    }
-
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, [themeMode]);
-
-  return (
-    <ThemeProvider
-      prefixCls={SYSTEM_PREFIX}
-      appearance={themeMode !== "auto" ? themeMode : undefined}
-      className={cx(styles.app, styles.scrollbar, styles.scrollbarPolyfill)}
-      customTheme={{
-        neutralColor: neutralColor,
-        primaryColor: primaryColor,
-      }}
-      customFonts={[HarmonyOS_Sans_Regular]}
-      theme={{
-        cssVar: true,
-        token: {
-          motion: animationMode !== "disabled",
-          motionUnit: animationMode === "agile" ? 0.05 : 0.1,
-        },
-      }}
-      themeMode={themeMode}
-      onAppearanceChange={(appearance) => {
-        if (themeMode !== "auto") return;
-
-        setCookie(CLOUD_THEME_APPEARANCE, appearance);
-      }}
-    >
-      {children}
-      <GlobalStyle />
-    </ThemeProvider>
-  );
-});
-
-export default AppTheme;