@4399ywkf/cli 1.0.9 → 2.0.0

package/dist/templates/app/src/styles/customTheme.ts

@@ -1,70 +0,0 @@
-import {
-  blue,
-  cyan,
-  geekblue,
-  gold,
-  green,
-  lime,
-  magenta,
-  orange,
-  purple,
-  red,
-  volcano,
-  yellow,
-} from '@/color/colors';
-import { mauve, olive, sage, sand, slate } from '@/color/neutrals';
-
-export const primaryColors = {
-  blue: blue.dark[9],
-  cyan: cyan.dark[9],
-  geekblue: geekblue.dark[9],
-  gold: gold.dark[9],
-  green: green.dark[9],
-  lime: lime.dark[9],
-  magenta: magenta.dark[9],
-  orange: orange.dark[9],
-  purple: purple.dark[9],
-  red: red.dark[9],
-  volcano: volcano.dark[9],
-  yellow: yellow.dark[9],
-};
-
-export type PrimaryColorsObj = typeof primaryColors;
-export type PrimaryColors = keyof PrimaryColorsObj;
-export const primaryColorsSwatches = [
-  primaryColors.red,
-  primaryColors.orange,
-  primaryColors.gold,
-  primaryColors.yellow,
-  primaryColors.lime,
-  primaryColors.green,
-  primaryColors.cyan,
-  primaryColors.blue,
-  primaryColors.geekblue,
-  primaryColors.purple,
-  primaryColors.magenta,
-  primaryColors.volcano,
-];
-export const neutralColors = {
-  mauve: mauve.dark[9],
-  olive: olive.dark[9],
-  sage: sage.dark[9],
-  sand: sand.dark[9],
-  slate: slate.dark[9],
-};
-export const neutralColorsSwatches = [
-  neutralColors.mauve,
-  neutralColors.slate,
-  neutralColors.sage,
-  neutralColors.olive,
-  neutralColors.sand,
-];
-
-export type NeutralColorsObj = typeof neutralColors;
-export type NeutralColors = keyof NeutralColorsObj;
-
-export const findCustomThemeName = (type: 'primary' | 'neutral', value: string) => {
-  const res = type === 'primary' ? primaryColors : neutralColors;
-  const result = Object.entries(res).find((item) => item[1] === value);
-  return result?.[0];
-};

package/dist/templates/app/src/styles/global.ts

@@ -1,53 +0,0 @@
-import { type Theme, css } from 'antd-style';
-
-// fix ios input keyboard
-// overflow: hidden;
-// ref: https://zhuanlan.zhihu.com/p/113855026
-export default ({ token }: { prefixCls: string; token: Theme }) => css`
-  html,
-  body{
-    position: relative;
-
-    overscroll-behavior: none;
-
-    height: 100%;
-    min-height: 100dvh;
-    max-height: 100dvh;
-
-    background: ${token.colorBgLayout};
-
-    @media (min-device-width: 576px) {
-      overflow: hidden;
-    }
-  }
-
-  body {
-    /* 提高合成层级，强制硬件加速，否则会有渲染黑边出现 */
-    will-change: opacity;
-    transform: translateZ(0);
-  }
-
-  * {
-    scrollbar-color: ${token.colorFill} transparent;
-    scrollbar-width: thin;
-
-    ::-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;
-    }
-  }
-`;

package/dist/templates/app/src/styles/highlighter.ts

@@ -1,34 +0,0 @@
-
-import { ReactNode, type Ref } from 'react';
-import { FlexboxProps } from 'react-layout-kit';
-
-import { DivProps } from '@/types';
-
-export interface SyntaxHighlighterProps extends DivProps {
-  animated?: boolean;
-  children: string;
-  enableTransformer?: HighlighterProps['enableTransformer'];
-  language: HighlighterProps['language'];
-  ref?: Ref<HTMLDivElement>;
-  theme?: HighlighterProps['theme'];
-  variant?: HighlighterProps['variant'];
-}
-
-export interface HighlighterProps extends Omit<FlexboxProps, 'children' | 'wrap'> {
-  allowChangeLanguage?: boolean;
-  animated?: boolean;
-  bodyRender?: (props: { content: string; language: string; originalNode: ReactNode }) => ReactNode;
-  children: string;
-  copyable?: boolean;
-  defaultExpand?: boolean;
-  enableTransformer?: boolean;
-  fileName?: string;
-  fullFeatured?: boolean;
-  icon?: ReactNode;
-  language: string;
-  shadow?: boolean;
-  showLanguage?: boolean;
-  theme?: 'lobe-theme';
-  variant?: 'filled' | 'outlined' | 'borderless';
-  wrap?: boolean;
-}

package/dist/templates/app/src/styles/index.ts

@@ -1,23 +0,0 @@
-import { createGlobalStyle } from "antd-style";
-export * from "./customTheme";
-
-import antdOverride from "./antdOverride";
-import global from "./global";
-
-const prefixCls = process.env.APP_NAME ?? "ant";
-
-export const GlobalStyle = createGlobalStyle(({ theme }) => [
-  global({ prefixCls, token: theme }),
-  antdOverride({ prefixCls, token: theme }),
-]);
-
-export * from "./text";
-export * from "./highlighter";
-export * from "./mermaid";
-
-export { generateCustomStylish as lobeCustomStylish } from "./theme/customStylish";
-export { generateCustomToken as lobeCustomToken } from "./theme/customToken";
-export {
-  generateColorNeutralPalette,
-  generateColorPalette,
-} from "./theme/generateColorPalette";

package/dist/templates/app/src/styles/mermaid.ts

@@ -1,7 +0,0 @@
-import { FlexboxProps } from 'react-layout-kit';
-
-export interface MermaidProps extends Omit<FlexboxProps, 'children' | 'wrap'> {
-  children: string;
-  theme?: 'lobe-theme';
-  wrap?: boolean;
-}

package/dist/templates/app/src/styles/text.ts

@@ -1,10 +0,0 @@
-import { css, cx } from 'antd-style';
-
-export const oneLineEllipsis = cx(css`
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-
-  text-overflow: ellipsis;
-`);

package/dist/templates/app/src/styles/theme/algorithms/darkAlgorithm.ts

@@ -1,47 +0,0 @@
-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/app/src/styles/theme/algorithms/lightAlgorithm.ts

@@ -1,44 +0,0 @@
-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/app/src/styles/theme/antdTheme.ts

@@ -1,62 +0,0 @@
-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/app/src/styles/theme/customStylish.ts

@@ -1,189 +0,0 @@
-import { GetCustomStylish, keyframes } from 'antd-style';
-
-import { LobeCustomStylish } from '@/types/customStylish';
-
-export const generateCustomStylish: GetCustomStylish<LobeCustomStylish> = ({
-  css,
-  token,
-  isDarkMode,
-}) => {
-  const gradient = keyframes`
-    0% {
-      background-position: 0% 50%;
-    }
-    50% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0% 50%;
-    }
-  `;
-
-  return {
-    active: css`
-      color: ${token.colorText};
-      background: ${token.colorFillSecondary};
-
-      &:hover {
-        color: ${token.colorText};
-        background: ${token.colorFill};
-      }
-
-      &:active {
-        color: ${token.colorText};
-        background: ${isDarkMode ? token.colorFillSecondary : token.colorFill};
-      }
-    `,
-    blur: css`
-      backdrop-filter: saturate(150%) blur(10px);
-    `,
-    blurStrong: css`
-      backdrop-filter: saturate(150%) blur(36px);
-    `,
-    bottomScrollbar: css`
-      ::-webkit-scrollbar {
-        width: 0;
-        height: 4px;
-        background-color: transparent;
-
-        &-thumb {
-          background-color: ${token.colorFill};
-          border-radius: 4px;
-          transition: background-color 500ms ${token.motionEaseOut};
-        }
-
-        &-corner {
-          display: none;
-          width: 0;
-          height: 0;
-        }
-      }
-    `,
-    disabled: css`
-      cursor: not-allowed;
-      opacity: 0.5;
-    `,
-    gradientAnimation: css`
-      background-image: linear-gradient(
-        -45deg,
-        ${token.gold},
-        ${token.magenta},
-        ${token.geekblue},
-        ${token.cyan}
-      );
-      background-size: 400% 400%;
-      border-radius: inherit;
-      animation: 5s ${gradient} 5s ease infinite;
-    `,
-    noScrollbar: css`
-      ::-webkit-scrollbar {
-        display: none;
-        width: 0;
-        height: 0;
-        background-color: transparent;
-      }
-    `,
-    resetLinkColor: css`
-      cursor: pointer;
-      color: ${token.colorTextSecondary};
-
-      &:hover {
-        color: ${token.colorText};
-      }
-    `,
-    shadow: css`
-      box-shadow:
-        0 1px 0 -1px ${isDarkMode ? token.colorBgLayout : token.colorBorder},
-        0 1px 2px -0.5px ${isDarkMode ? token.colorBgLayout : token.colorBorder},
-        0 2px 2px -1px ${isDarkMode ? token.colorBgLayout : token.colorBorderSecondary},
-        0 3px 6px -4px ${isDarkMode ? token.colorBgLayout : token.colorBorderSecondary};
-    `,
-    variantBorderless: css`
-      background: none;
-      border: none;
-      box-shadow: none;
-
-      &:hover {
-        background: ${token.colorFillTertiary};
-      }
-
-      &:active {
-        background: ${isDarkMode ? token.colorFillQuaternary : token.colorFillSecondary};
-      }
-    `,
-    variantBorderlessDanger: css`
-      background: none;
-      border: none;
-      box-shadow: none;
-
-      &:hover {
-        background: ${token.colorErrorBgHover};
-
-      }
-
-      &:active {
-        background: ${token.colorErrorBgActive};
-      }
-    `,
-    variantBorderlessWithoutHover: css`
-      background: none;
-      border: none;
-      box-shadow: none;
-    `,
-    variantFilled: css`
-      background: ${token.colorFillTertiary};
-
-      &:hover {
-        background: ${token.colorFillSecondary};
-      }
-
-      &:active {
-        background: ${isDarkMode ? token.colorFillTertiary : token.colorFill};
-      }
-    `,
-    variantFilledDanger: css`
-      background: ${token.colorErrorBg};
-
-      &:hover {
-        background: ${token.colorErrorBgHover};
-      }
-
-      &:active {
-        background: ${token.colorErrorBgActive};
-      }
-    `,
-    variantFilledWithoutHover: css`
-      background: ${token.colorFillTertiary};
-    `,
-    variantOutlined: css`
-      background: ${token.colorBgContainer};
-      border: 1px solid ${token.colorBorderSecondary};
-
-      &:hover {
-        background: ${token.colorBgContainer};
-        border: 1px solid ${token.colorBorder};
-      }
-
-      &:active {
-        background: ${token.colorBgContainer};
-        border: 1px solid ${token.colorBorder};
-      }
-    `,
-
-    variantOutlinedDanger: css`
-      border: 1px solid ${token.colorErrorBorder};
-
-      &:hover {
-        border: 1px solid ${token.colorErrorBorder};
-      }
-
-      &:active {
-        border: 1px solid ${token.colorErrorBorder};
-      }
-    `,
-    variantOutlinedWithoutHover: css`
-      background: ${token.colorBgContainer};
-      border: 1px solid ${token.colorBorderSecondary};
-    `,
-  };
-};

package/dist/templates/app/src/styles/theme/customToken.ts

@@ -1,93 +0,0 @@
-import { GetCustomToken } from "antd-style";
-import { AliasToken } from "antd/es/theme/interface";
-import { camelCase } from "lodash-es";
-import { mix } from "polished";
-
-import { colorScales } from "@/color/colors";
-import type { ColorScaleItem } from "@/color/types";
-import type { LobeCustomToken } from "@/types/customToken";
-
-const generateColorPalette = ({
-  name,
-  scale,
-  appearance,
-}: {
-  appearance: "light" | "dark";
-  name: string;
-  scale: ColorScaleItem;
-}) => {
-  const isDarkMode = appearance === "dark";
-  return {
-    [`${name}Fill`]: scale[`${appearance}A`][isDarkMode ? 3 : 4],
-    [`${name}FillSecondary`]: scale[`${appearance}A`][isDarkMode ? 2 : 3],
-    [`${name}FillTertiary`]: scale[`${appearance}A`][isDarkMode ? 1 : 2],
-    [`${name}FillQuaternary`]: scale[`${appearance}A`][isDarkMode ? 0 : 1],
-    [`${name}Bg`]: scale[`${appearance}A`][1],
-    [`${name}BgHover`]: scale[`${appearance}A`][2],
-    [`${name}Border`]: scale[appearance][4],
-    [`${name}BorderSecondary`]: scale[appearance][3],
-    [`${name}BorderHover`]: scale[appearance][isDarkMode ? 5 : 3],
-    [`${name}Hover`]: scale[appearance][isDarkMode ? 10 : 8],
-    [`${name}`]: scale[appearance][9],
-    [`${name}Active`]: scale[appearance][isDarkMode ? 7 : 10],
-    [`${name}TextHover`]: scale[`${appearance}A`][isDarkMode ? 10 : 8],
-    [`${name}Text`]: scale[`${appearance}A`][9],
-    [`${name}TextActive`]: scale[`${appearance}A`][isDarkMode ? 7 : 10],
-  };
-};
-
-const generateCustomColorPalette = ({
-  name,
-  scale,
-  appearance,
-}: {
-  appearance: "light" | "dark";
-  name: string;
-  scale: ColorScaleItem;
-}): Partial<AliasToken> => {
-  const colorStepPalette: { [key: string]: string } = {};
-  // @ts-ignore
-  for (const [index, color] of scale[appearance].entries()) {
-    if (index === 0 || index === 12) continue;
-
-    colorStepPalette[`${name}${index}`] = color;
-  }
-  // @ts-ignore
-  for (const [index, color] of scale[`${appearance}A`].entries()) {
-    if (index === 0 || index === 12) continue;
-
-    colorStepPalette[`${name}${index}A`] = color;
-  }
-
-  return {
-    ...colorStepPalette,
-    ...generateColorPalette({ appearance, name, scale }),
-  };
-};
-
-export const generateCustomToken: GetCustomToken<LobeCustomToken> = ({
-  isDarkMode,
-  token,
-}) => {
-  let colorCustomToken: any = {};
-
-  for (const [type, scale] of Object.entries(colorScales)) {
-    colorCustomToken = {
-      ...colorCustomToken,
-      ...generateCustomColorPalette({
-        appearance: isDarkMode ? "dark" : "light",
-        name: camelCase(type),
-        scale,
-      }),
-    };
-  }
-
-  return {
-    ...colorCustomToken,
-    colorBgContainerSecondary: mix(
-      0.5,
-      token.colorBgLayout,
-      token.colorBgContainer
-    ),
-  };
-};

package/dist/templates/app/src/styles/theme/generateColorPalette.ts

@@ -1,59 +0,0 @@
-import { AliasToken } from 'antd/es/theme/interface';
-import { capitalize } from 'lodash-es';
-
-import type { ColorScaleItem } from '@/color/types';
-
-export const generateColorPalette = ({
-  type,
-  scale,
-  appearance,
-}: {
-  appearance: 'light' | 'dark';
-  scale: ColorScaleItem;
-  type: 'Primary' | 'Success' | 'Warning' | 'Error' | 'Info' | string;
-}): Partial<AliasToken> => {
-  const name = capitalize(type);
-  const isDarkMode = appearance === 'dark';
-  return {
-    [`color${name}Fill`]: scale[`${appearance}A`][isDarkMode ? 3 : 4],
-    [`color${name}FillSecondary`]: scale[`${appearance}A`][isDarkMode ? 2 : 3],
-    [`color${name}FillTertiary`]: scale[`${appearance}A`][isDarkMode ? 1 : 2],
-    [`color${name}FillQuaternary`]: scale[`${appearance}A`][isDarkMode ? 0 : 1],
-    [`color${name}Bg`]: scale[appearance][1],
-    [`color${name}BgHover`]: scale[appearance][2],
-    [`color${name}Border`]: scale[appearance][4],
-    [`color${name}BorderHover`]: scale[appearance][isDarkMode ? 5 : 3],
-    [`color${name}Hover`]: scale[appearance][isDarkMode ? 10 : 8],
-    [`color${name}`]: scale[appearance][9],
-    [`color${name}Active`]: scale[appearance][isDarkMode ? 7 : 10],
-    [`color${name}TextHover`]: scale[appearance][isDarkMode ? 10 : 8],
-    [`color${name}Text`]: scale[appearance][9],
-    [`color${name}TextActive`]: scale[appearance][isDarkMode ? 7 : 10],
-  };
-};
-
-export const generateColorNeutralPalette = ({
-  scale,
-  appearance,
-}: {
-  appearance: 'light' | 'dark';
-  scale: ColorScaleItem;
-}): Partial<AliasToken> => {
-  return {
-    colorBgContainer: appearance === 'dark' ? scale[appearance][1] : scale[appearance][0],
-    colorBgElevated: appearance === 'dark' ? scale[appearance][2] : scale[appearance][0],
-    colorBgLayout: appearance === 'dark' ? scale[appearance][0] : scale[appearance][1],
-    colorBgMask: scale.lightA[8],
-    colorBgSpotlight: scale[appearance][4],
-    colorBorder: scale[appearance][3],
-    colorBorderSecondary: scale[appearance][2],
-    colorFill: scale[`${appearance}A`][3],
-    colorFillQuaternary: scale[`${appearance}A`][0],
-    colorFillSecondary: scale[`${appearance}A`][2],
-    colorFillTertiary: scale[`${appearance}A`][1],
-    colorText: scale[appearance][12],
-    colorTextQuaternary: scale[appearance][6],
-    colorTextSecondary: scale[appearance][10],
-    colorTextTertiary: scale[appearance][8],
-  };
-};