@4399ywkf/cli 0.0.22 → 1.0.2

package/dist/templates/src/pages/index.css

@@ -0,0 +1,282 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+#root {
+  height: 100%;
+  width: 100%;
+}
+
+p {
+  margin: 0;
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
+}
+
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+
+.module__app {
+  height: calc(100vh - 50px) !important;
+  position: relative;
+  width: 100%;
+  -webkit-box-pack: start;
+  place-content: flex-start;
+  align-items: flex-start;
+  -webkit-font-smoothing: antialiased;
+  overflow: auto;
+}
+
+:root {
+  --red-1: 255, 236, 232;
+  --red-2: 253, 205, 197;
+  --red-3: 251, 172, 163;
+  --red-4: 249, 137, 129;
+  --red-5: 247, 101, 96;
+  --red-6: 245, 63, 63;
+  --red-7: 203, 39, 45;
+  --red-8: 161, 21, 30;
+  --red-9: 119, 8, 19;
+  --red-10: 77, 0, 10;
+  --orangered-1: 255, 243, 232;
+  --orangered-2: 253, 221, 195;
+  --orangered-3: 252, 197, 159;
+  --orangered-4: 250, 172, 123;
+  --orangered-5: 249, 144, 87;
+  --orangered-6: 247, 114, 52;
+  --orangered-7: 204, 81, 32;
+  --orangered-8: 162, 53, 17;
+  --orangered-9: 119, 31, 6;
+  --orangered-10: 77, 14, 0;
+  --orange-1: 255, 247, 232;
+  --orange-2: 255, 228, 186;
+  --orange-3: 255, 207, 139;
+  --orange-4: 255, 182, 93;
+  --orange-5: 255, 154, 46;
+  --orange-6: 255, 125, 0;
+  --orange-7: 210, 95, 0;
+  --orange-8: 166, 69, 0;
+  --orange-9: 121, 46, 0;
+  --orange-10: 77, 27, 0;
+  --gold-1: 255, 252, 232;
+  --gold-2: 253, 244, 191;
+  --gold-3: 252, 233, 150;
+  --gold-4: 250, 220, 109;
+  --gold-5: 249, 204, 69;
+  --gold-6: 247, 186, 30;
+  --gold-7: 204, 146, 19;
+  --gold-8: 162, 109, 10;
+  --gold-9: 119, 75, 4;
+  --gold-10: 77, 45, 0;
+  --yellow-1: 254, 255, 232;
+  --yellow-2: 254, 254, 190;
+  --yellow-3: 253, 250, 148;
+  --yellow-4: 252, 242, 107;
+  --yellow-5: 251, 232, 66;
+  --yellow-6: 250, 220, 25;
+  --yellow-7: 207, 175, 15;
+  --yellow-8: 163, 132, 8;
+  --yellow-9: 120, 93, 3;
+  --yellow-10: 77, 56, 0;
+  --lime-1: 252, 255, 232;
+  --lime-2: 237, 248, 187;
+  --lime-3: 220, 241, 144;
+  --lime-4: 201, 233, 104;
+  --lime-5: 181, 226, 65;
+  --lime-6: 159, 219, 29;
+  --lime-7: 126, 183, 18;
+  --lime-8: 95, 148, 10;
+  --lime-9: 67, 112, 4;
+  --lime-10: 42, 77, 0;
+  --green-1: 232, 255, 234;
+  --green-2: 175, 240, 181;
+  --green-3: 123, 225, 136;
+  --green-4: 76, 210, 99;
+  --green-5: 35, 195, 67;
+  --green-6: 0, 180, 42;
+  --green-7: 0, 154, 41;
+  --green-8: 0, 128, 38;
+  --green-9: 0, 102, 34;
+  --green-10: 0, 77, 28;
+  --cyan-1: 232, 255, 251;
+  --cyan-2: 183, 244, 236;
+  --cyan-3: 137, 233, 224;
+  --cyan-4: 94, 223, 214;
+  --cyan-5: 55, 212, 207;
+  --cyan-6: 20, 201, 201;
+  --cyan-7: 13, 165, 170;
+  --cyan-8: 7, 130, 139;
+  --cyan-9: 3, 97, 108;
+  --cyan-10: 0, 66, 77;
+  --blue-1: 232, 247, 255;
+  --blue-2: 195, 231, 254;
+  --blue-3: 159, 212, 253;
+  --blue-4: 123, 192, 252;
+  --blue-5: 87, 169, 251;
+  --blue-6: 52, 145, 250;
+  --blue-7: 32, 108, 207;
+  --blue-8: 17, 75, 163;
+  --blue-9: 6, 48, 120;
+  --blue-10: 0, 26, 77;
+  --arcoblue-1: 232, 243, 255;
+  --arcoblue-2: 190, 218, 255;
+  --arcoblue-3: 148, 191, 255;
+  --arcoblue-4: 106, 161, 255;
+  --arcoblue-5: 64, 128, 255;
+  --arcoblue-6: 22, 93, 255;
+  --arcoblue-7: 14, 66, 210;
+  --arcoblue-8: 7, 44, 166;
+  --arcoblue-9: 3, 26, 121;
+  --arcoblue-10: 0, 13, 77;
+  --purple-1: 245, 232, 255;
+  --purple-2: 221, 190, 246;
+  --purple-3: 195, 150, 237;
+  --purple-4: 168, 113, 227;
+  --purple-5: 141, 78, 218;
+  --purple-6: 114, 46, 209;
+  --purple-7: 85, 29, 176;
+  --purple-8: 60, 16, 143;
+  --purple-9: 39, 6, 110;
+  --purple-10: 22, 0, 77;
+  --pinkpurple-1: 255, 232, 251;
+  --pinkpurple-2: 247, 186, 239;
+  --pinkpurple-3: 240, 142, 230;
+  --pinkpurple-4: 232, 101, 223;
+  --pinkpurple-5: 225, 62, 219;
+  --pinkpurple-6: 217, 26, 217;
+  --pinkpurple-7: 176, 16, 182;
+  --pinkpurple-8: 138, 9, 147;
+  --pinkpurple-9: 101, 3, 112;
+  --pinkpurple-10: 66, 0, 77;
+  --magenta-1: 255, 232, 241;
+  --magenta-2: 253, 194, 219;
+  --magenta-3: 251, 157, 199;
+  --magenta-4: 249, 121, 183;
+  --magenta-5: 247, 84, 168;
+  --magenta-6: 245, 49, 157;
+  --magenta-7: 203, 30, 131;
+  --magenta-8: 161, 16, 105;
+  --magenta-9: 119, 6, 79;
+  --magenta-10: 77, 0, 52;
+  --gray-1: 247, 248, 250;
+  --gray-2: 242, 243, 245;
+  --gray-4: 201, 205, 212;
+  --gray-5: 169, 174, 184;
+  --gray-6: 134, 144, 156;
+  --gray-7: 107, 119, 133;
+  --gray-8: 78, 89, 105;
+  --gray-9: 39, 46, 59;
+  --gray-10: 29, 33, 41;
+  --data-2: var(--arcoblue-2);
+  --data-3: 85, 197, 253;
+  --data-4: 156, 220, 252;
+  --data-8: var(--green-2);
+  --data-10: var(--purple-2);
+  --success-1: var(--green-1);
+  --success-2: var(--green-2);
+  --success-3: var(--green-3);
+  --success-4: var(--green-4);
+  --success-5: var(--green-5);
+  --success-6: var(--green-6);
+  --success-7: var(--green-7);
+  --success-8: var(--green-8);
+  --success-9: var(--green-9);
+  --success-10: var(--green-10);
+  --primary-1: var(--arcoblue-1);
+  --primary-2: var(--arcoblue-2);
+  --primary-3: var(--arcoblue-3);
+  --primary-4: var(--arcoblue-4);
+  --primary-5: var(--arcoblue-5);
+  --primary-6: var(--arcoblue-6);
+  --primary-7: var(--arcoblue-7);
+  --primary-8: var(--arcoblue-8);
+  --primary-9: var(--arcoblue-9);
+  --primary-10: var(--arcoblue-10);
+  --danger-1: var(--red-1);
+  --danger-2: var(--red-2);
+  --danger-3: var(--red-3);
+  --danger-4: var(--red-4);
+  --danger-5: var(--red-5);
+  --danger-6: var(--red-6);
+  --danger-7: var(--red-7);
+  --danger-8: var(--red-8);
+  --danger-9: var(--red-9);
+  --danger-10: var(--red-10);
+  --warning-1: var(--orange-1);
+  --warning-2: var(--orange-2);
+  --warning-3: var(--orange-3);
+  --warning-4: var(--orange-4);
+  --warning-5: var(--orange-5);
+  --warning-6: var(--orange-6);
+  --warning-7: var(--orange-7);
+  --warning-8: var(--orange-8);
+  --warning-9: var(--orange-9);
+  --warning-10: var(--orange-10);
+  --link-1: var(--arcoblue-1);
+  --link-2: var(--arcoblue-2);
+  --link-3: var(--arcoblue-3);
+  --link-4: var(--arcoblue-4);
+  --link-5: var(--arcoblue-5);
+  --link-6: var(--arcoblue-6);
+  --link-7: var(--arcoblue-7);
+  --link-8: var(--arcoblue-8);
+  --link-9: var(--arcoblue-9);
+  --link-10: var(--arcoblue-10);
+  --data-1: var(--arcoblue-5);
+  --data-5: var(--orange-6);
+  --data-6: var(--orange-3);
+  --data-7: var(--green-4);
+  --data-9: var(--purple-4);
+  --data-11: var(--gold-6);
+  --data-12: var(--gold-4);
+  --data-13: var(--lime-6);
+  --data-14: var(--lime-4);
+  --data-15: var(--magenta-4);
+  --data-16: var(--magenta-3);
+  --data-17: var(--cyan-6);
+  --data-18: var(--cyan-3);
+  --data-19: var(--pinkpurple-4);
+  --data-20: var(--pinkpurple-2);
+  --container--layout--padding: 20px 32px;
+  --border-radius-medium: 4px;
+  --color-border-3: #dde2e9;
+  --primary-5: 66, 129, 255;
+  --color-text-1: rgb(29, 33, 41);
+  --color-fill-2: rgb(242, 243, 245);
+  --gray-3: 229, 230, 235;
+  --color-neutral-3: rgb(var(--gray-3));
+  --container--form--layout--header-height: 64px;
+  --contexify-zIndex: 666 !important;
+  --contexify-menu-minWidth: 220px !important;
+  --contexify-menu-padding: 6px !important;
+  --contexify-menu-radius: var(--border-radius-medium) !important;
+  --contexify-menu-bgColor: #fff !important;
+  --contexify-menu-shadow: 0 4px 10px rgba(0, 0, 0, .1) !important;
+  --contexify-menu-negatePadding: var(--contexify-menu-padding) !important;
+  --contexify-separator-color: rgba(0, 0, 0, .2) !important;
+  --contexify-separator-margin: 5px !important;
+  --contexify-itemContent-padding: 6px !important;
+  --contexify-activeItem-radius: 4px !important;
+  --contexify-item-color: #333 !important;
+  --contexify-activeItem-color: var(--color-text-1) !important;
+  --contexify-activeItem-bgColor: var(--color-fill-2) !important;
+  --contexify-rightSlot-color: #6f6e77 !important;
+  --contexify-activeRightSlot-color: #fff !important;
+  --contexify-arrow-color: #6f6e77 !important;
+  --contexify-activeArrow-color: #fff !important
+}

package/dist/templates/src/pages/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Index() {
+  return <div>这是约定式路由的Index路由</div>;
+}

package/dist/templates/src/routes.tsx

@@ -0,0 +1,18 @@
+import React, { lazy } from "react";
+import { createBrowserRouter, Navigate } from "react-router";
+
+export const createRouter = (basename?: string) => {
+  return createBrowserRouter([
+    {
+      path: "/",
+      element: <Navigate to="/base" replace />,
+    },
+    {
+      path: "/base",
+      Component: lazy(() => import("@/pages/base")),
+    },
+  ], {
+    basename: basename || "/",
+  });
+};
+

package/dist/templates/src/setupTests.ts

@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom';
+
+// 模拟 window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+// 模拟 ResizeObserver
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
+
+// 模拟 IntersectionObserver
+global.IntersectionObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
+
+// 模拟 Garfish (微前端框架)
+(global as any).window = global.window || {};
+(global as any).window.__GARFISH__ = true;
+(global as any).window.Garfish = {
+  channel: {
+    emit: jest.fn(),
+  },
+};

package/dist/templates/src/styles/antdOverride.ts

@@ -0,0 +1,24 @@
+import { type Theme, css } from 'antd-style';
+import { rgba } from 'polished';
+
+export default ({ token }: { prefixCls: string; token: Theme }) => css`
+  .${token.prefixCls}-popover {
+    z-index: 1100;
+  }
+
+  .${token.prefixCls}-menu-sub.${token.prefixCls}-menu-vertical {
+    border: 1px solid ${token.colorBorder};
+    box-shadow: ${token.boxShadow};
+  }
+
+  .${token.prefixCls}-menu-item-selected {
+    .${token.prefixCls}-menu-title-content {
+      color: ${token.colorText};
+    }
+  }
+
+  .${token.prefixCls}-modal-mask, .${token.prefixCls}-drawer-mask {
+    background: ${rgba(token.colorBgLayout, 0.5)} !important;
+    backdrop-filter: blur(2px);
+  }
+`;

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

@@ -0,0 +1,70 @@
+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/src/styles/global.ts

@@ -0,0 +1,53 @@
+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/src/styles/highlighter.ts

@@ -0,0 +1,34 @@
+
+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/src/styles/index.ts

@@ -0,0 +1,23 @@
+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/src/styles/mermaid.ts

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

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

@@ -0,0 +1,10 @@
+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/src/styles/theme/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/src/styles/theme/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,
+  };
+};