@4399ywkf/cli 0.0.22 → 1.0.2

package/dist/templates/RoutesConventionsRspackPlugin.js

@@ -0,0 +1,100 @@
+require("esbuild-register");
+const { getConventionRoutes } = require("../../router/routesConvention");
+const { getRoutes } = require("../../router/getRoutes");
+const path = require("path");
+const fs = require("fs");
+
+class RoutesConventionsRspackPlugin {
+  constructor(options = {}) {
+    this.options = {
+      base: "src/pages",
+      exclude: [
+        /\/components?\//,
+        /\/models\//,
+        /\/utils?\//,
+        /^_/,
+        /\.d\.ts$/,
+        /\.(test|spec|e2e)\.(ts|tsx|js|jsx)$/,
+      ],
+      ...options,
+    };
+  }
+
+  generateRoutes() {
+    const routesFilePath = path.resolve(process.cwd(), "src/routes.ts");
+
+    if (fs.existsSync(routesFilePath)) {
+      try {
+        delete require.cache[routesFilePath];
+        const routesModule = require(routesFilePath);
+        const configRoutes = routesModule.routes;
+
+        if (
+          configRoutes &&
+          Array.isArray(configRoutes) &&
+          configRoutes.length > 0
+        ) {
+          console.log("📋 使用配置式路由...", configRoutes);
+          return getRoutes(configRoutes);
+        } else {
+          console.log("📋 routes文件存在但为空，使用约定式路由...");
+        }
+      } catch (error) {
+        console.warn("⚠️ 读取routes文件失败，使用约定式路由...", error.message);
+      }
+    } else {
+      console.log("📋 routes文件不存在，使用约定式路由...");
+    }
+
+    const routes = getConventionRoutes({
+      base: path.resolve(process.cwd(), this.options.base),
+      prefix: "pages/",
+      exclude: this.options.exclude,
+    });
+    return routes;
+  }
+
+  apply(compiler) {
+    const pluginName = "RoutesConventionsRspackPlugin";
+
+    compiler.hooks.beforeCompile.tapAsync(pluginName, (params, callback) => {
+      try {
+        console.log("🚀 生成约定式路由...");
+        const routes = this.generateRoutes();
+
+        // 找到 DefinePlugin 并更新路由数据
+        const definePlugin = compiler.options.plugins.find(
+          (plugin) => plugin.constructor.name === "DefinePlugin"
+        );
+        console.log("注入数据 -------->", routes, definePlugin);
+
+        if (definePlugin && definePlugin.definitions) {
+          definePlugin.definitions["__CONVENTION_ROUTES__"] =
+            JSON.stringify(routes);
+        } else if (definePlugin) {
+          // 对于 rspack，直接修改 DefinePlugin 的内部定义
+          // rspack 的 DefinePlugin 可能将定义存储在不同的属性中
+          if (!definePlugin.definitions) {
+            definePlugin.definitions = {};
+          }
+          definePlugin.definitions["__CONVENTION_ROUTES__"] =
+            JSON.stringify(routes);
+
+          // 或者尝试直接访问 rspack DefinePlugin 的内部结构
+          // 可能需要访问 definePlugin.options 或其他属性
+          if (definePlugin.options) {
+            definePlugin.options["__CONVENTION_ROUTES__"] =
+              JSON.stringify(routes);
+          }
+        }
+
+        callback();
+      } catch (error) {
+        console.error("❌ 生成约定式路由失败:", error);
+        callback(error);
+      }
+    });
+  }
+}
+
+module.exports = RoutesConventionsRspackPlugin;

package/dist/templates/ScaleRow.tsx

@@ -0,0 +1,74 @@
+import { Space, message } from "antd";
+import React, { memo } from "react";
+import { Flexbox } from "react-layout-kit";
+
+import { copyToClipboard } from "@/utils/copyToClipboard";
+
+import { alphaBg, useStyles } from "./style";
+
+export interface IScaleRow {
+  name: string;
+  scale: string[];
+  title: "light" | "lightA" | "dark" | "darkA";
+}
+
+const ScaleRow = memo<IScaleRow>(({ name, title, scale }) => {
+  const { styles } = useStyles();
+
+  let style = {};
+  let isAlpha = false;
+
+  switch (title) {
+    case "lightA": {
+      style = { background: alphaBg.light, backgroundColor: "#fff" };
+      isAlpha = true;
+      break;
+    }
+    case "darkA": {
+      style = { background: alphaBg.dark, backgroundColor: "#000" };
+      isAlpha = true;
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+
+  return (
+    <Space size={2}>
+      <div className={styles.scaleRowTitle} key={title}>
+        <div className={styles.text}>{title}</div>
+      </div>
+      {scale.map((color, index) => {
+        if (index === 0 || index === 12) return false;
+
+        return (
+          <div
+            className={styles.scaleBox}
+            key={index}
+            onClick={async () => {
+              const content = `token.${name}${index}${
+                isAlpha ? "A" : ""
+              } /* ${color} */`;
+
+              await copyToClipboard(content);
+              message.success(content);
+            }}
+            style={style}
+            title={color}
+          >
+            <Flexbox
+              align={"center"}
+              className={styles.scaleItem}
+              horizontal
+              justify={"center"}
+              style={{ backgroundColor: color }}
+            />
+          </div>
+        );
+      })}
+    </Space>
+  );
+});
+
+export default ScaleRow;

package/dist/templates/ThemeContext.tsx

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

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