@yl2/kite-stack

kite 全栈脚手架运行时库 —— 把 layout / login / store / router / bootstrap 封装为可复用 npm 包。

安装

pnpm add @yl2/kite-stack

使用

业务侧提供 bootstrap.ts，调用 bootstrap 一次性完成配置注入 + 路由生成 + 渲染：

import { bootstrap } from "@yl2/kite-stack";
import "@yl2/kite-stack/style.css";

bootstrap({
  pages: import.meta.glob("./pages/**/*.tsx"),
  config: {
    appName: "我的管理后台",
    // menus / user / login / theme / logo ...
  },
});

// 运行时更新用户信息 / 菜单
// import { setUserInfo, setMenus } from "@yl2/kite-stack";
// setUserInfo({ name: "李四" });

bootstrap 配置项

| 字段 | 说明 | | -------------- | ------------------------------------------------------- | | appName | 应用名称（侧边栏标题、document.title） | | title | 当前页面标题 | | defaultTheme | 默认主题 light / dark | | defaultColor | 默认主题色 | | user | 用户信息，同步水印与右上角下拉 | | menus | 扁平菜单（parentId 结构，自动建树） | | login | 登录页 brand / form / onLogin 配置 | | watermark | 水印文案（默认取 user.name） | | logo | 侧边栏 logo：传 string 渲染为 <img>，也可传 ReactNode |

后端服务（@yl2/kite-stack/server）

@yl2/kite-stack 同时封装了 koa 全栈服务能力，业务只需写 api/**/*.ts，后端中间件（DB / JWT 鉴权 / 登录 / 文件式路由 / vite dev）全部内置：

// server.ts
import { startServer } from "@yl2/kite-stack/server";

startServer({
  mode: process.env.NODE_ENV === "production" ? "pro" : "dev",
  port: process.env.PORT || 3000,
  api: "api/**/*.ts",
  jwtSecret: process.env.JWT_SECRET, // 必填
  mockUsers: [{ name: "admin", password: "123456", roleId: 1 }], // 无 DB 时开发用
  // db: { host, user, password, database, port },  // 生产真实 DB
});

内置能力：

• POST /login/unification 登录签 JWT；无 DB 时用 mockUsers 校验
• POST /db/* 通用 CRUD（find/remove/add/update/select/countSelect，表名经 safeName 校验 + 参数化查询）
• POST /user/info 当前登录用户信息
• 业务 api/<name>.ts 导出的方法自动注册为 POST /<name>/<method>
• dev 模式集成 vite middleware 托管前端

配置项：

| 字段 | 说明 | | ----------- | --------------------------------------------------- | | db | MySQL 配置；不传则从 env 读；都没有走 mock 模式 | | api | 业务 API glob，默认 api/**/*.ts | | jwtSecret | JWT 密钥（必填，建议 env JWT_SECRET） | | mockUsers | 无 DB 时的 mock 用户（仅开发） | | mode | dev（vite 中间件）/ pro（静态托管 staticDir） | | html | 入口 html 路径 | | staticDir | 生产静态目录，默认 ./dist |

宿主约定

• 通过 CDN 引入 react / react-dom / shineout（UMD global）
• react-router-dom 由宿主项目正常打包（components external）
• vite 别名 @ → src