@4399ywkf/cli 1.0.9 → 2.0.0

package/dist/templates/app/ywkf.config.ts

@@ -0,0 +1,71 @@
+import { defineConfig } from "@4399ywkf/core/config";
+import { tailwindPlugin, reactQueryPlugin, zustandPlugin } from "@4399ywkf/core";
+
+/**
+ * YWKF 框架配置
+ *
+ * 所有扩展功能通过插件按需启用：
+ * - reactQueryPlugin() — React Query + Axios 请求层（默认开启）
+ * - zustandPlugin()    — Zustand 状态管理（默认开启）
+ * - tailwindPlugin()   — Tailwind CSS（默认开启）
+ * - garfishPlugin()    — 微前端
+ * - i18nPlugin()       — 国际化
+ * - themePlugin()      — antd-style 主题
+ *
+ * 示例：
+ *   import { garfishPlugin, i18nPlugin, themePlugin } from "@4399ywkf/core";
+ */
+export default defineConfig({
+  appName: process.env.APP_NAME || "app",
+  appCName: process.env.APP_CNAME || "应用",
+
+  dev: {
+    port: Number(process.env.APP_PORT) || 3000,
+    host: process.env.APP_HOST || "localhost",
+  },
+
+  output: {
+    path: "dist",
+    publicPath: process.env.PUBLIC_PATH || "/",
+  },
+
+  html: {
+    title: process.env.APP_CNAME || "应用",
+    mountRoot: process.env.APP_NAME || "app",
+  },
+
+  router: {
+    basename: process.env.BASENAME || "/",
+    conventional: true,
+    pagesDir: "src/pages",
+  },
+
+  style: {
+    less: { enabled: true },
+    tailwindcss: true,
+  },
+
+  performance: {
+    dropConsole: process.env.NODE_ENV === "production",
+  },
+
+  plugins: [
+    // 请求层（默认开启）
+    reactQueryPlugin(),
+
+    // 状态管理（默认开启）
+    zustandPlugin(),
+
+    // 样式
+    tailwindPlugin(),
+
+    // 微前端（按需启用）
+    // garfishPlugin({ appName: process.env.APP_NAME || "app" }),
+
+    // 国际化（按需启用）
+    // i18nPlugin({ defaultLocale: "zh-CN", locales: ["zh-CN", "en-US"] }),
+
+    // 主题系统（按需启用）
+    // themePlugin({ darkMode: true }),
+  ],
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4399ywkf/cli",
-  "version": "1.0.9",
+  "version": "2.0.0",
   "description": "运维开发部脚手架",
   "main": "dist/index.js",
   "bin": {
@@ -9,6 +9,24 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "node bin/cli.js",
+    "debug": "node --inspect-brk bin/cli.js",
+    "debug:create": "node --inspect-brk bin/cli.js create test-project",
+    "debug:create-with-template": "node --inspect-brk bin/cli.js create test-project -t webpack-mainApplicate_demo",
+    "debug:create-with-template-rspack": "node --inspect-brk bin/cli.js create test-project -t rspack-subApplicate_demo",
+    "debug:help": "node --inspect-brk bin/cli.js --help",
+    "build": "rollup -c && node scripts/postbuild.js",
+    "build:watch": "rollup -c -w",
+    "prepublishOnly": "npm run build",
+    "link": "npm link",
+    "unlink": "npm unlink -g",
+    "changeset": "changeset",
+    "changeset:version": "changeset version",
+    "changeset:publish": "changeset publish",
+    "postpublish": "pnpm build && git push && git push --tags"
+  },
   "repository": {
     "type": "git"
   },
@@ -16,7 +34,20 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@ant-design/colors": "^8.0.1",
+    "@ant-design/cssinjs": "^2.1.0",
+    "@ant-design/icons-svg": "^4.4.2",
+    "@babel/runtime": "^7.28.6",
     "@changesets/cli": "^2.29.5",
+    "@emotion/css": "^11.13.5",
+    "@emotion/react": "^11.14.0",
+    "@emotion/serialize": "^1.3.3",
+    "@emotion/styled": "^11.14.1",
+    "@emotion/utils": "^1.4.2",
+    "@rc-component/motion": "^1.3.1",
+    "@rc-component/portal": "^2.2.0",
+    "@rc-component/trigger": "^3.9.0",
+    "@rc-component/util": "^1.9.0",
     "@umijs/utils": "4.6.14",
     "boxen": "^5.1.2",
     "chalk": "^4.1.2",
@@ -26,9 +57,15 @@
     "figlet": "^1.5.2",
     "fs-extra": "^11.1.1",
     "inquirer": "^8.2.5",
-    "ora": "^5.4.1"
+    "ora": "^5.4.1",
+    "rc-resize-observer": "^1.4.3",
+    "scheduler": "^0.27.0",
+    "side-channel": "^1.1.0",
+    "stylis": "^4.3.6",
+    "use-merge-value": "^1.2.0"
   },
   "devDependencies": {
+    "@biomejs/biome": "2.3.2",
     "@rollup/plugin-commonjs": "^25.0.8",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.1",
@@ -37,8 +74,7 @@
     "rollup": "^4.46.3",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-esbuild": "^6.2.1",
-    "tslib": "^2.8.1",
-    "@biomejs/biome": "2.3.2"
+    "tslib": "^2.8.1"
   },
   "files": [
     "dist",
@@ -46,21 +82,5 @@
   ],
   "authors": [
     "ywjszx@4399.com"
-  ],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "node bin/cli.js",
-    "debug": "node --inspect-brk bin/cli.js",
-    "debug:create": "node --inspect-brk bin/cli.js create test-project",
-    "debug:create-with-template": "node --inspect-brk bin/cli.js create test-project -t webpack-mainApplicate_demo",
-    "debug:create-with-template-rspack": "node --inspect-brk bin/cli.js create test-project -t rspack-subApplicate_demo",
-    "debug:help": "node --inspect-brk bin/cli.js --help",
-    "build": "rollup -c && node scripts/postbuild.js",
-    "build:watch": "rollup -c -w",
-    "link": "npm link",
-    "unlink": "npm unlink -g",
-    "changeset": "changeset",
-    "changeset:version": "changeset version",
-    "changeset:publish": "changeset publish"
-  }
-}
+  ]
+}

package/dist/templates/404/index.tsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-export default function NotFound() {
-  return <div>404</div>;
-}

package/dist/templates/404/page.tsx

@@ -1,27 +0,0 @@
-import UnFindPng from '@config/public/404.png';
-import { Button, Empty } from 'antd';
-import React from 'react';
-import { useNavigate } from 'react-router';
-
-export const UnPageFind = () => {
-  const navigate = useNavigate();
-
-  return (
-    <div className='p-4 w-full h-full relative flex justify-center items-center'>
-      <Empty
-        image={UnFindPng}
-        description={
-          <div className='flex flex-col gap-2 justify-center items-center'>
-            <h2>抱歉，页面无法访问…</h2>
-            <span>404，网址错误或已失效。请检查网址。</span>
-            <Button size={'large'} type={'primary'} className='w-24' onClick={() => navigate('/')}>
-              返回首页
-            </Button>
-          </div>
-        }
-      ></Empty>
-    </div>
-  );
-};
-
-export default UnPageFind;

package/dist/templates/404.tsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-export default function NotFound() {
-  return <div>404页面</div>;
-}

package/dist/templates/AntdStaticMethods/index.tsx

@@ -1,20 +0,0 @@
-// Entry component
-import { App } from 'antd';
-import type { MessageInstance } from 'antd/es/message/interface';
-import type { ModalStaticFunctions } from 'antd/es/modal/confirm';
-import type { NotificationInstance } from 'antd/es/notification/interface';
-import { memo } from 'react';
-
-let message: MessageInstance;
-let notification: NotificationInstance;
-let modal: Omit<ModalStaticFunctions, 'warn'>;
-
-export default memo(() => {
-  const staticFunction = App.useApp();
-  message = staticFunction.message;
-  modal = staticFunction.modal;
-  notification = staticFunction.notification;
-  return null;
-});
-
-export { message, modal, notification };

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

@@ -1,15 +0,0 @@
-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/ColorScales/ScaleRow.tsx

@@ -1,74 +0,0 @@
-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/ColorScales/index.md

@@ -1,168 +0,0 @@
----
-nav: Colors
-title: ColorScales
-description: The ColorScales component is a memoized component used to display a color scale. It receives props containing the name of the scale, the color scale items, and a number representing the index of the mid-highlight. The component renders a set of ScaleRow components, each representing a different part of the color scale.
-apiHeader:
-  atomId: 'colors, neutrals'
-  pkg: '@lobehub/ui/color'
-  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/color/ColorScales/index.md'
-  sourceUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/color/colors/index.ts'
----
-
-## Primary
-
-```tsx
-import { ColorScales, primary } from '@lobehub/ui/color';
-
-export default () => <ColorScales name="primary" scale={primary} midHighLight={9} />;
-```
-
-## Colors
-
-### Red
-
-```tsx
-import { ColorScales, red } from '@lobehub/ui/color';
-
-export default () => <ColorScales name="red" scale={red} midHighLight={9} />;
-```
-
-### Volcano
-
-```tsx
-import { ColorScales, volcano } from '@lobehub/ui/color';
-
-export default () => <ColorScales name="volcano" scale={volcano} midHighLight={9} />;
-```
-
-### Orange
-
-```tsx
-import { ColorScales, orange } from '@lobehub/ui/color';
-
-export default () => <ColorScales name="orange" scale={orange} midHighLight={9} />;
-```
-
-### Gold
-
-```tsx
-import { ColorScales, gold } from '@lobehub/ui/color';
-
-export default () => <ColorScales name="gold" scale={gold} midHighLight={9} />;
-```
-
-### Yellow
-
-```tsx
-import { ColorScales, yellow } from '@lobehub/ui/color';
-
-export default () => <ColorScales name="yellow" scale={yellow} midHighLight={9} />;
-```
-
-### Lime
-
-```tsx
-import { ColorScales, lime } from '@lobehub/ui/color';
-
-export default () => <ColorScales name="lime" scale={lime} midHighLight={9} />;
-```
-
-### Green
-
-```tsx
-import { ColorScales, green } from '@lobehub/ui/color';
-
-export default () => <ColorScales name="green" scale={green} midHighLight={9} />;
-```
-
-### Cyan
-
-```tsx
-import { ColorScales, cyan } from '@lobehub/ui/color';
-
-export default () => <ColorScales name="cyan" scale={cyan} midHighLight={9} />;
-```
-
-### Blue
-
-```tsx
-import { ColorScales, blue } from '@lobehub/ui/color';
-
-export default () => <ColorScales name="blue" scale={blue} midHighLight={9} />;
-```
-
-### Geekblue
-
-```tsx
-import { ColorScales, geekblue } from '@lobehub/ui/color';
-
-export default () => <ColorScales name="geekblue" scale={geekblue} midHighLight={9} />;
-```
-
-### Purple
-
-```tsx
-import { ColorScales, purple } from '@lobehub/ui/color';
-
-export default () => <ColorScales name="purple" scale={purple} midHighLight={9} />;
-```
-
-### Magenta
-
-```tsx
-import { ColorScales, magenta } from '@lobehub/ui/color';
-
-export default () => <ColorScales name="magenta" scale={magenta} midHighLight={9} />;
-```
-
-## Neutral
-
-### Gray
-
-```tsx
-import { ColorScales, gray } from '@lobehub/ui/color';
-
-export default () => <ColorScales name="gray" scale={gray} midHighLight={9} />;
-```
-
-## Extra Neutral
-
-### Mauve
-
-```tsx
-import { ColorScales, mauve } from '@lobehub/ui/color';
-
-export default () => <ColorScales name="mauve" scale={mauve} midHighLight={9} />;
-```
-
-### Olive
-
-```tsx
-import { ColorScales, olive } from '@lobehub/ui/color';
-
-export default () => <ColorScales name="olive" scale={olive} midHighLight={9} />;
-```
-
-### Sage
-
-```tsx
-import { ColorScales, sage } from '@lobehub/ui/color';
-
-export default () => <ColorScales name="sage" scale={sage} midHighLight={9} />;
-```
-
-### Sand
-
-```tsx
-import { ColorScales, sand } from '@lobehub/ui/color';
-
-export default () => <ColorScales name="sand" scale={sand} midHighLight={9} />;
-```
-
-### Slate
-
-```tsx
-import { ColorScales, slate } from '@lobehub/ui/color';
-
-export default () => <ColorScales name="slate" scale={slate} midHighLight={9} />;
-```