@creekjs/umi-plugins 1.0.0

package/README.md

@@ -0,0 +1,326 @@
+# @creekjs/umi-plugins
+
+Umi 框架的插件集合，提供布局管理和 OpenAPI 集成功能。
+
+## 特性
+
+- 🎨 Creek Layout - 智能布局插件
+- 📡 OpenAPI 集成 - 自动生成 API 服务
+- 🔧 开箱即用的配置
+- 🛠️ TypeScript 支持
+
+## 安装
+
+```bash
+npm install @creekjs/umi-plugins --save-dev
+# 或
+yarn add @creekjs/umi-plugins -D
+```
+
+## 插件列表
+
+### 1. Creek Layout 插件
+
+智能布局插件，自动处理路由图标和布局配置。
+
+#### 配置
+
+在 `.umirc.ts` 或 `config/config.ts` 中配置：
+
+```typescript
+export default {
+  plugins: [
+    '@creekjs/umi-plugins/creek-layout'
+  ],
+  // 插件会自动处理布局相关配置
+};
+```
+
+#### 功能特性
+
+- **自动图标检测**: 自动检测和配置 Ant Design 图标
+- **路由增强**: 为路由自动添加图标和布局信息
+- **类型安全**: 提供完整的 TypeScript 类型支持
+
+#### 路由配置示例
+
+```typescript
+// config/routes.ts
+export default [
+  {
+    path: '/',
+    component: '@/layouts/index',
+    routes: [
+      {
+        path: '/dashboard',
+        name: '仪表盘',
+        icon: 'DashboardOutlined', // 插件会自动验证图标
+        component: './Dashboard'
+      },
+      {
+        path: '/users',
+        name: '用户管理',
+        icon: 'UserOutlined',
+        component: './Users'
+      }
+    ]
+  }
+];
+```
+
+### 2. OpenAPI 插件
+
+集成 OpenAPI 服务生成功能到 Umi 构建流程。
+
+#### 配置
+
+```typescript
+// .umirc.ts
+export default {
+  plugins: [
+    '@creekjs/umi-plugins/open-api'
+  ],
+  openApi: {
+    requestLibPath: '@/utils/request',
+    schemaPath: 'https://api.example.com/swagger.json',
+    serversPath: './src/services',
+    projectName: 'myProject'
+  }
+};
+```
+
+#### 配置选项
+
+```typescript
+interface OpenApiConfig {
+  requestLibPath?: string;        // 请求库路径
+  requestOptionsType?: string;    // 请求选项类型
+  requestImportStatement?: string; // 请求导入语句
+  apiPrefix?: string | ((params: ApiPrefixParams) => string); // API 前缀
+  serversPath?: string;           // 服务输出路径
+  schemaPath?: string;            // OpenAPI 规范文件路径
+  projectName?: string;           // 项目名称
+  namespace?: string;             // 命名空间
+  enumStyle?: 'string-literal' | 'enum'; // 枚举样式
+  nullable?: boolean;             // 是否允许 null
+  templatesFolder?: string;       // 模板文件夹
+  dataFields?: string[];          // 数据字段
+  isCamelCase?: boolean;          // 是否使用驼峰命名
+}
+```
+
+#### 多配置支持
+
+```typescript
+// 支持多个 API 源
+export default {
+  openApi: [
+    {
+      requestLibPath: '@/utils/request',
+      schemaPath: 'https://api1.example.com/swagger.json',
+      serversPath: './src/services/api1',
+      namespace: 'api1'
+    },
+    {
+      requestLibPath: '@/utils/request',
+      schemaPath: 'https://api2.example.com/swagger.json',
+      serversPath: './src/services/api2',
+      namespace: 'api2'
+    }
+  ]
+};
+```
+
+#### 命令行使用
+
+```bash
+# 生成 API 服务
+umi openApi
+
+# 在构建时自动生成
+umi build
+```
+
+## 工具函数
+
+### withTmpPath
+
+生成临时文件路径的工具函数。
+
+```typescript
+import { withTmpPath } from '@creekjs/umi-plugins/utils';
+
+// 在插件中使用
+export default (api: IApi) => {
+  const tmpPath = withTmpPath({
+    api,
+    path: 'my-plugin/config.ts'
+  });
+  
+  // 生成临时文件
+  api.writeTmpFile({
+    path: tmpPath,
+    content: 'export default {};'
+  });
+};
+```
+
+## 完整配置示例
+
+### 基础项目配置
+
+```typescript
+// .umirc.ts
+import { defineConfig } from '@umijs/max';
+
+export default defineConfig({
+  // 插件配置
+  plugins: [
+    '@creekjs/umi-plugins/creek-layout',
+    '@creekjs/umi-plugins/open-api'
+  ],
+  
+  // OpenAPI 配置
+  openApi: {
+    requestLibPath: '@/utils/request',
+    schemaPath: process.env.API_SCHEMA_URL || 'http://localhost:3001/api-docs',
+    serversPath: './src/services',
+    projectName: 'myApp',
+    isCamelCase: true,
+    enumStyle: 'string-literal'
+  },
+  
+  // 其他 Umi 配置
+  antd: {},
+  access: {},
+  model: {},
+  initialState: {},
+  request: {},
+  layout: {
+    title: 'Creek App'
+  }
+});
+```
+
+### 请求库配置
+
+```typescript
+// src/utils/request.ts
+import { request } from '@creekjs/request';
+import { message } from 'antd';
+
+// 请求拦截器
+request.instance.interceptors.request.use(
+  (config) => {
+    // 添加认证头
+    const token = localStorage.getItem('token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+
+// 响应拦截器
+request.instance.interceptors.response.use(
+  (response) => {
+    return response.data;
+  },
+  (error) => {
+    // 统一错误处理
+    const { response } = error;
+    if (response?.status === 401) {
+      message.error('登录已过期，请重新登录');
+      // 跳转到登录页
+      window.location.href = '/login';
+    } else {
+      message.error(error.message || '请求失败');
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default request;
+```
+
+### 路由配置
+
+```typescript
+// config/routes.ts
+export default [
+  {
+    path: '/',
+    redirect: '/dashboard'
+  },
+  {
+    name: '仪表盘',
+    icon: 'DashboardOutlined',
+    path: '/dashboard',
+    component: './Dashboard'
+  },
+  {
+    name: '用户管理',
+    icon: 'UserOutlined',
+    path: '/users',
+    routes: [
+      {
+        name: '用户列表',
+        path: '/users/list',
+        component: './Users/List'
+      },
+      {
+        name: '用户详情',
+        path: '/users/:id',
+        component: './Users/Detail',
+        hideInMenu: true
+      }
+    ]
+  },
+  {
+    name: '系统设置',
+    icon: 'SettingOutlined',
+    path: '/settings',
+    component: './Settings'
+  }
+];
+```
+
+## 开发自定义插件
+
+### 插件结构
+
+```typescript
+// src/my-plugin/index.ts
+import { IApi } from '@umijs/max';
+import { withTmpPath } from '@creekjs/umi-plugins/utils';
+
+export default (api: IApi) => {
+  // 插件描述
+  api.describe({
+    key: 'myPlugin',
+    config: {
+      schema: ({ zod }) => {
+        return zod.object({
+          enabled: zod.boolean().optional()
+        });
+      }
+    },
+    enableBy: api.EnableBy.config
+  });
+  
+  // 修改配置
+  api.modifyConfig((memo) => {
+    // 修改配置逻辑
+    return memo;
+  });
+  
+  // 生成临时文件
+  api.onGenerateFiles(() => {
+    const tmpPath = withTmpPath({
+      api,
+      path: 'my-plugin/runtime.ts'
+    });
+    
+    api.writeTmpFile({
+      path: tmpPath,

package/dist/creek-layout/index.d.ts

@@ -0,0 +1,3 @@
+import { IApi } from '@umijs/max';
+declare const _default: (api: IApi) => void;
+export default _default;

package/dist/creek-layout/index.js

@@ -0,0 +1,193 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/creek-layout/index.tsx
+var creek_layout_exports = {};
+__export(creek_layout_exports, {
+  default: () => creek_layout_default
+});
+module.exports = __toCommonJS(creek_layout_exports);
+var import_max = require("@umijs/max");
+var import_plugin_utils = require("@umijs/max/plugin-utils");
+var import_fs = require("fs");
+var import_path = require("path");
+var import_utils = require("../utils");
+var getPkgHasDep = (api, depList) => {
+  const hasDependency = (pkg2, dep) => {
+    var _a, _b;
+    return ((_a = pkg2.dependencies) == null ? void 0 : _a[dep]) || ((_b = pkg2.devDependencies) == null ? void 0 : _b[dep]);
+  };
+  const { pkg } = api;
+  return depList.find((dep) => hasDependency(pkg, dep));
+};
+var getPkgPath = (api, pkgName, depList) => {
+  const _depList = depList && depList.length ? depList : [pkgName];
+  const pkgHasDep = getPkgHasDep(api, _depList);
+  if (pkgHasDep) {
+    const nodeModulesPath = (0, import_path.join)(api.cwd, "node_modules", pkgHasDep, "package.json");
+    if ((0, import_fs.existsSync)(nodeModulesPath)) {
+      return (0, import_path.join)(api.cwd, "node_modules", pkgHasDep);
+    }
+    const cwd = process.cwd();
+    if (api.cwd !== cwd) {
+      const altNodeModulesPath = (0, import_path.join)(cwd, "node_modules", pkgHasDep, "package.json");
+      if ((0, import_fs.existsSync)(altNodeModulesPath)) {
+        return (0, import_path.join)(cwd, "node_modules", pkgHasDep);
+      }
+    }
+  }
+  return (0, import_path.dirname)(require.resolve(`${pkgName}/package.json`));
+};
+var getIconsInfoForRoutes = (api) => {
+  const antIconsPath = (0, import_plugin_utils.winPath)(getPkgPath(api, "@ant-design/icons"));
+  const getAllIcons = () => {
+    const iconTypePath = (0, import_path.join)(antIconsPath, "./lib/icons/index.d.ts");
+    const iconTypeContent = (0, import_fs.readFileSync)(iconTypePath, "utf-8");
+    return [...iconTypeContent.matchAll(/default as (\w+)/g)].reduce((memo, cur) => {
+      memo[cur[1]] = true;
+      return memo;
+    }, {});
+  };
+  const allIcons = getAllIcons();
+  const iconsMap = Object.keys(api.appData.routes).reduce((memo, id) => {
+    const { icon } = api.appData.routes[id];
+    if (icon) {
+      const upperIcon = import_plugin_utils.lodash.upperFirst(import_plugin_utils.lodash.camelCase(icon));
+      if (allIcons[upperIcon]) {
+        memo[upperIcon] = true;
+      }
+      if (allIcons[`${upperIcon}Outlined`]) {
+        memo[`${upperIcon}Outlined`] = true;
+      }
+    }
+    return memo;
+  }, {});
+  const icons = Object.keys(iconsMap);
+  return {
+    icons,
+    antIconsPath
+  };
+};
+var creek_layout_default = (api) => {
+  const TEMPLATE_DIR = (0, import_path.join)(__dirname, "template");
+  const creekWebComponentsPath = (0, import_plugin_utils.winPath)(getPkgPath(api, "@creekjs/web-components"));
+  const creekIconPath = require.resolve(`${creekWebComponentsPath}/dist/creek-icon`);
+  api.describe({
+    key: "creekLayout",
+    config: {
+      schema({ zod }) {
+        return zod.object({
+          title: zod.string(),
+          iconFontCNs: zod.string().array()
+        }).partial();
+      },
+      onChange: api.ConfigChangeType.regenerateTmpFiles
+    },
+    enableBy: api.EnableBy.config
+  });
+  api.modifyAppData((memo) => {
+    const version = require(`${creekWebComponentsPath}/package.json`).version;
+    memo.pluginLayout = {
+      creekWebComponentsPath,
+      version
+    };
+    return memo;
+  });
+  api.modifyConfig((memo) => {
+    const name = require(`${creekWebComponentsPath}/package.json`).name;
+    memo.alias[name] = creekWebComponentsPath;
+    const routes = memo.routes;
+    const hasNotFoundPage = routes == null ? void 0 : routes.find((item) => [item.name, item.path].includes("404"));
+    const defaultRoutes = [
+      {
+        name: "404",
+        path: "*",
+        hideInMenu: true,
+        component: require.resolve(`${creekWebComponentsPath}/dist/creek-layout/Exception/NotFoundPage`)
+      }
+    ];
+    if (!hasNotFoundPage) {
+      memo.routes = [...routes, ...defaultRoutes];
+    }
+    return memo;
+  });
+  api.onGenerateFiles(() => {
+    var _a, _b;
+    const hasInitialStatePlugin = api.config.initialState;
+    const iconsInfo = getIconsInfoForRoutes(api);
+    const iconFontCNs = Array.isArray((_a = api.userConfig.creekLayout) == null ? void 0 : _a.iconFontCNs) ? (_b = api.userConfig.creekLayout) == null ? void 0 : _b.iconFontCNs : [];
+    api.writeTmpFile({
+      path: "Layout.tsx",
+      tplPath: (0, import_path.join)(TEMPLATE_DIR, "/layout.tpl"),
+      context: {
+        creekWebComponentsPath,
+        hasInitialStatePlugin,
+        access: api.config.access,
+        creekLocaleConfig: api.config.creekLocaleConfig ? JSON.stringify(api.config.glocale, null, 2) : "undefined",
+        userConfig: JSON.stringify(api.config.creekLayout, null, 2)
+      }
+    });
+    api.writeTmpFile({
+      path: "types.d.ts",
+      tplPath: (0, import_path.join)(TEMPLATE_DIR, "/type.tpl"),
+      context: {
+        creekWebComponentsPath,
+        hasInitialStatePlugin,
+        access: api.config.access
+      }
+    });
+    api.writeTmpFile({
+      path: import_max.RUNTIME_TYPE_FILE_NAME,
+      tplPath: (0, import_path.join)(TEMPLATE_DIR, "/runtime-config.type.tpl"),
+      context: {}
+    });
+    api.writeTmpFile({
+      path: "icons.tsx",
+      tplPath: (0, import_path.join)(TEMPLATE_DIR, "/icons.tpl"),
+      context: {
+        icons: iconsInfo.icons,
+        antIconsPath: iconsInfo.antIconsPath,
+        creekIconPath
+      }
+    });
+    api.writeTmpFile({
+      path: "runtime.tsx",
+      tplPath: (0, import_path.join)(TEMPLATE_DIR, "/runtime.tpl"),
+      context: {
+        creekWebComponentsPath,
+        hasIconFontCNs: iconFontCNs.length > 0,
+        iconFontCNs: JSON.stringify(iconFontCNs)
+      }
+    });
+  });
+  api.addLayouts(() => {
+    return [
+      {
+        id: "ant-design-pro-layout",
+        file: (0, import_utils.withTmpPath)({ api, path: "Layout.tsx" }),
+        test: (route) => {
+          return route.layout !== false;
+        }
+      }
+    ];
+  });
+  api.addRuntimePluginKey(() => ["layout"]);
+  api.addRuntimePlugin(() => {
+    return [(0, import_utils.withTmpPath)({ api, path: "runtime.tsx" })];
+  });
+};

package/dist/creek-layout/template/icons.tpl

@@ -0,0 +1,6 @@
+
+import {CreekIcon} from '{{{creekIconPath}}}';
+{{#icons}}
+import {{.}} from '{{{antIconsPath}}}/es/icons/{{.}}';
+{{/icons}}
+export default {CreekIcon,{{#icons}}{{.}}, {{/icons}} };

package/dist/creek-layout/template/layout.tpl

@@ -0,0 +1,123 @@
+import { useLocation, useAppData, IRoute, matchRoutes, Outlet, useNavigate } from 'umi';
+import { useMemo } from 'react';
+import _ from 'lodash';
+import { CreekLayout, CreekLayoutProps } from '{{{creekWebComponentsPath}}}';
+
+{{#hasInitialStatePlugin}}
+import { useModel } from '@@/plugin-model';
+{{/hasInitialStatePlugin}}
+{{^hasInitialStatePlugin}}
+const useModel = null;
+{{/hasInitialStatePlugin}}
+
+{{#access}}
+import { useAccessMarkedRoutes } from '@@/plugin-access';
+{{/access}}
+{{^access}}
+const useAccessMarkedRoutes = (r) => r;
+{{/access}}
+
+// 过滤出需要显示的路由, 这里的filterFn 指 不希望显示的层级
+const filterRoutes = (routes: IRoute[], filterFn: (route: IRoute) => boolean) => {
+  if (routes.length === 0) {
+    return [];
+  }
+  let newRoutes = [];
+  for (const route of routes) {
+    const newRoute = { ...route };
+    if (filterFn(route)) {
+      if (Array.isArray(newRoute.routes)) {
+        newRoutes.push(...filterRoutes(newRoute.routes, filterFn));
+      }
+    } else {
+      if (Array.isArray(newRoute.children)) {
+        newRoute.children = filterRoutes(newRoute.children, filterFn);
+        newRoute.routes = newRoute.children;
+      }
+      newRoutes.push(newRoute);
+    }
+  }
+
+  return newRoutes;
+};
+
+// 格式化路由 处理因 wrapper 导致的 菜单 path 不一致
+const mapRoutes = (routes: IRoute[]) => {
+  if (routes.length === 0) {
+    return [];
+  }
+  return routes.map((route) => {
+    // 需要 copy 一份, 否则会污染原始数据
+    const newRoute = { ...route };
+    if (route.originPath) {
+      newRoute.path = route.originPath;
+    }
+
+    if (Array.isArray(route.routes)) {
+      newRoute.routes = mapRoutes(route.routes);
+    }
+
+    if (Array.isArray(route.children)) {
+      newRoute.children = mapRoutes(route.children);
+    }
+
+    return newRoute;
+  });
+};
+
+const Layout = (props: CreekLayoutProps) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { clientRoutes, pluginManager } = useAppData();
+  const initialInfo = (useModel && useModel('@@initialState')) || {
+    initialState: undefined,
+    loading: false,
+    setInitialState: null,
+  };
+  const userConfig = {{{userConfig}}};
+  const creekLocaleConfig = {{{creekLocaleConfig}}};
+  const runtimeConfig = pluginManager.applyPlugins({
+    key: 'layout',
+    type: 'modify',
+    initialValue: {
+      ...initialInfo,
+    },
+  });
+
+  // 现在的 layout 及 wrapper 实现是通过父路由的形式实现的, 会导致路由数据多了冗余层级
+  const newRoutes = filterRoutes(
+    clientRoutes.filter((route) => route.id === 'ant-design-pro-layout'),
+    (route) => {
+      return (
+        (!!route.isLayout && route.id !== 'ant-design-pro-layout') || !!route.isWrapper
+      );
+    }
+  );
+  const [route] = useAccessMarkedRoutes(mapRoutes(newRoutes));
+
+  const matchedRoute = useMemo(
+    () => matchRoutes(route.children, location.pathname)?.pop?.()?.route,
+    [location.pathname]
+  );
+
+  return (
+      <CreekLayout
+        location={location}
+        runtimeConfig={runtimeConfig}
+        matchedRoute={matchedRoute}
+        navigate={navigate}
+        userConfig={userConfig}
+        route={route}
+        initialInfo={initialInfo}
+        children={
+          runtimeConfig.childrenRender ? (
+            runtimeConfig.childrenRender(<Outlet />, props)
+          ) : (
+            <Outlet />
+          )
+        }
+      />
+  );
+};
+
+export default Layout;

package/dist/creek-layout/template/runtime-config.type.tpl

@@ -0,0 +1,5 @@
+import type { RunTimeLayoutConfig } from './types.d';
+
+export interface IRuntimeConfig {
+  layout?: RunTimeLayoutConfig
+}

package/dist/creek-layout/template/runtime.tpl

@@ -0,0 +1,41 @@
+import { CreekConfigProvider } from '{{{creekWebComponentsPath}}}';
+
+import icons from './icons';
+
+function formatIcon(name: string) {
+  return name
+    .replace(name[0], name[0].toUpperCase())
+    .replace(/-(\w)/g, function (all, letter) {
+      return letter.toUpperCase();
+    });
+}
+
+export function patchRoutes({ routes }) {
+  Object.keys(routes).forEach((key) => {
+    const { icon } = routes[key];
+    if (icon && typeof icon === 'string') {
+      const upperIcon = formatIcon(icon);
+      if (icons[upperIcon] || icons[upperIcon + 'Outlined']) {
+        const IconComponentName = icons[upperIcon] || icons[upperIcon + 'Outlined'];
+        routes[key].icon = <IconComponentName />;
+      }
+      {{#hasIconFontCNs}}
+      else {
+        const CreekIcon = icons.CreekIcon;
+        routes[key].icon = <CreekIcon type={icon} />;
+      }
+      {{/hasIconFontCNs}}
+    }
+  });
+}
+
+export function rootContainer(container){
+  const iconFontCNs={{{iconFontCNs}}};
+  const result = <CreekConfigProvider iconFontCNs={iconFontCNs}>
+    {container}
+  </CreekConfigProvider>;
+  
+  return result;
+}
+
+