listpage_cli 0.0.286 → 0.0.292

package/bin/cli.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
 const prompts_1 = require("./prompts");
 const copy_1 = require("./copy");
@@ -52,6 +53,8 @@ async function main() {
         return initCmd();
     if (cmd === "sync-docs")
         return syncDocsCmd();
+    if (cmd === "install-skill")
+        return installSkillCmd();
     (0, prompts_1.printHelp)();
 }
 main();
@@ -65,3 +68,15 @@ async function syncDocsCmd() {
     (0, copy_1.syncDirWithRename)(sourceDocs, destDocs);
     console.log("已同步 .trae 和 docs 到执行目录的同级目录");
 }
+async function installSkillCmd() {
+    const args = process.argv.slice(2);
+    const skillName = args.find((a) => a !== "install-skill") || "test";
+    const sourceDir = path_1.default.join(__dirname, "..", "skills", skillName);
+    if (!(0, fs_1.existsSync)(sourceDir)) {
+        console.error(`技能 ${skillName} 不存在`);
+        process.exit(1);
+    }
+    const targetDir = path_1.default.join(process.cwd(), ".cursor", "skills", skillName || "");
+    (0, copy_1.copySkillDir)(sourceDir, targetDir);
+    console.log(`已安装 ${skillName} 技能到 ${targetDir}`);
+}

package/bin/copy.js

@@ -10,6 +10,7 @@ exports.copyBackendTemplate = copyBackendTemplate;
 exports.copyDeployScriptTemplate = copyDeployScriptTemplate;
 exports.ensureDir = ensureDir;
 exports.isDirEmpty = isDirEmpty;
+exports.copySkillDir = copySkillDir;
 exports.syncDirWithRename = syncDirWithRename;
 const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
@@ -100,6 +101,9 @@ function compileTemplateContent(str, vars) {
 function isDirEmpty(dir) {
     return !(0, fs_1.existsSync)(dir) || (0, fs_1.readdirSync)(dir).length === 0;
 }
+function copySkillDir(sourceDir, targetDir) {
+    syncDirWithRename(sourceDir, targetDir);
+}
 function syncDirWithRename(source, destination) {
     ensureDir(destination);
     const items = (0, fs_1.readdirSync)(source);

package/bin/prompts.js

@@ -64,6 +64,8 @@ function printHelp() {
         "说明: 进入中文引导式交互，按提示填写即可",
         "用法: listpage_cli sync-docs",
         "说明: 将模板中的 .trae 和 docs 同步到执行目录的同级目录",
+        "用法: listpage_cli install-skill [listpage] [--project]",
+        "说明: 安装 listpage 技能到 Cursor。默认安装到 ~/.cursor/skills/；加 --project 则安装到当前项目 .cursor/skills/",
     ].join("\n");
     console.log(h);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "listpage_cli",
-  "version": "0.0.286",
+  "version": "0.0.292",
   "private": false,
   "bin": {
     "listpage_cli": "bin/cli.js"
@@ -14,7 +14,8 @@
   },
   "files": [
     "bin",
-    "templates"
+    "templates",
+    "skills"
   ],
   "devDependencies": {
     "typescript": "^5.6.2",

package/skills/listpage/SKILL.md

@@ -0,0 +1,26 @@
+---
+name: listpage
+description: 使用 listpage-next 实现页面级列表/表格。Use ONLY when user explicitly requests to implement a page with listpage, e.g. 用 listpage 实现 xxx 页面, 使用 ListPage 做 xxx. Do NOT apply for generic list/table requests without explicit listpage mention.
+---
+
+# ListPage 使用技能
+
+示例与 API 见 [examples.md](examples.md)、[api.md](api.md)。
+
+## 生成流程（7 步）
+
+```
+Task Progress:
+- [ ] 步骤 1：创建目录结构（简单页面单文件；复杂页面 config/ + components/）
+- [ ] 步骤 2：定义 filters（FilterFormOption[]，AntD 组件 + allowClear）
+- [ ] 步骤 3：定义 columns （ListPageTableColumn[]，优先 component: 'text'|'link'|'switch'）
+- [ ] 步骤 4：实现 request（(params, filters) => Promise<PaginationData<T>>）
+- [ ] 步骤 5：组装 index.tsx（initialValues、注入 request/filter/table/floats ）
+- [ ] 步骤 6：注册 floats（若有浮窗：floats=[{ key, render }]，ctx.showFloat(key, record, true)）
+- [ ] 步骤 7：自检（rowKey、storageKey 唯一、浮窗 key 短横线小写）
+```
+
+## 命名约定
+
+- 浮窗 key：短横线小写（如 `create`、`edit-detail`）
+- 文件：小驼峰（`columns.tsx`、`filters.tsx`）

package/skills/listpage/api.md

@@ -0,0 +1,163 @@
+# API（listpage-components）
+
+基于 `listpage-components` 的 ListPage Props 及使用中涉及的类型。
+
+## ListPageProps
+
+| 属性 | 说明 | 类型 | 必填 |
+| --- | --- | --- | --- |
+| `title` | 页面标题 | `ReactNode` | 否 |
+| `extra` | 标题右侧操作区 | `ReactNode \| (ctx: ListPageContextValue) => ReactNode` | 否 |
+| `filter` | 筛选配置 | `FilterConfig \| FilterRenderConfig` | 否 |
+| `toolbar` | 工具栏 | `ToolbarRenderConfig` | 否 |
+| `table` | 表格配置 | `TableConfig \| TableRenderConfig` | 是 |
+| `request` | 数据请求 | `ListPageRequest` | 是 |
+| `floats` | 浮窗列表 | `FloatItem[]` | 否 |
+| `initialValues` | 初始值 | `InitialValues` | 否 |
+
+---
+
+## InitialValues
+
+```ts
+type InitialValues = {
+  filterValues?: any;   // 预填筛选
+  pageSize?: number;   // 默认每页条数
+  currentPage?: number; // 默认当前页
+};
+```
+
+---
+
+## filter（FilterConfig）
+
+```ts
+type FilterConfig = { items: FilterItem[] };
+
+type FilterItem = {
+  name: string;
+  label?: ReactNode;
+  component?: ReactElement;   // antd Input、Select 等
+  colSpan?: number;
+  formItemProps?: Omit<FormItemProps, 'children'>;
+};
+```
+
+也可使用 `FilterRenderConfig`：`{ render: (props: FilterRenderProps) => ReactNode }` 自定义渲染。
+
+---
+
+## toolbar（ToolbarRenderConfig）
+
+```ts
+type ToolbarRenderConfig = {
+  render: (props: ToolbarRenderProps) => ReactNode;
+};
+
+type ToolbarRenderProps = {
+  ctx: ListPageContextValue;
+  selection?: SelectionState;   // { selectedRowKeys; selectedRows }
+};
+```
+
+---
+
+## table（TableConfig）
+
+```ts
+type TableConfig = {
+  columns: ListPageColumnType[];
+  rowKey?: string;
+  rowSelection?: boolean | object;
+  title?: ReactNode;            // 表格标题
+  extra?: ReactNode | (ctx: ListPageContextValue) => ReactNode;
+  rowTitleKey?: string;         // 选中项 Tooltip 展示的字段
+  pagination?: PaginationProps; // antd 分页配置
+  [key: string]: any;           // 透传至 antd Table
+};
+```
+
+---
+
+## ListPageColumnType
+
+继承 antd `ColumnType`，额外支持：
+
+| 属性 | 说明 | 类型 |
+| --- | --- | --- |
+| `renderer` | 内置渲染器 | `ColumnRendererType` |
+| `rendererOptions` | 渲染器配置 | `ColumnRendererOptions[renderer]` |
+| `component` | 自定义渲染（优先于 renderer） | `(props: ColumnComponentProps) => ReactNode` |
+
+**ColumnComponentProps**：`{ ctx: ListPageContextValue; record; index; value }`
+
+**ColumnRendererType**：`'text' | 'ellipsis' | 'tag' | 'badge' | 'date' | 'datetime' | 'number' | 'money' | 'percent' | 'boolean' | 'link' | 'enum' | 'copyable' | 'avatar' | 'image'`
+
+**ColumnRendererOptions**（按 renderer 选配）：
+- `ellipsis`: `{ maxLength?: number }`
+- `tag`: `{ colorMap?: Record<string, string>; options?: Array<{ value; label; color? }> }`
+- `badge`: `{ colorMap }`
+- `date` / `datetime`: `{ format?: string }`
+- `number` / `money` / `percent`: `{ precision?: number }`，`money` 额外 `{ prefix?: string }`
+- `boolean`: `{ labels?: [string, string] }`
+- `link`: `{ onClick?: (record, ctx?) => void; href?: (record) => string }`
+- `enum`: `{ options: Array<{ value; label }> }`
+- `avatar`: `{ fallback?: string }`
+- `image`: `{ width?: number; height?: number }`
+
+---
+
+## request（ListPageRequest）
+
+```ts
+type ListPageRequest = (
+  pageParams: RequestParams,
+  filterValues: any,
+  sortParams: SortParams
+) => Promise<{ list: any[]; total: number }>;
+
+type RequestParams = { current: number; pageSize: number };
+type SortParams = { field?: string; order?: 'ascend' | 'descend' | null };
+```
+
+---
+
+## floats（FloatItem）
+
+```ts
+type FloatItem = {
+  key: string;
+  render: (props: FloatComponentProps) => ReactNode;
+};
+
+type FloatComponentProps<T = any> = {
+  record: T;
+  visible: boolean;
+  onClose: (code?: number) => void | (() => void);
+  // (code?: number) => void：onClose() 取消不刷新，onClose(1) 确认并刷新
+};
+```
+
+---
+
+## ListPageContextValue
+
+`extra`、`toolbar.render`、`table.extra`、列 `component` 中通过 `useListPageContext()` 获取。
+
+| 属性 | 说明 |
+| --- | --- |
+| `filters` | 当前筛选值 |
+| `initialFilterValues` | 初始筛选值 |
+| `pagination` | `{ current; pageSize; total }` |
+| `dataSource` | 表格数据 |
+| `loading` | 加载中 |
+| `selection` | `{ selectedRowKeys; selectedRows }` |
+| `sort` | `{ field?; order? }` |
+| `refreshTable` | 刷新表格 |
+| `submitFilters` | 提交筛选并刷新 |
+| `resetFilters` | 重置筛选 |
+| `updatePagination` | 更新分页 `(page, pageSize)` |
+| `updateSort` | 更新排序 `(field?, order?)` |
+| `showFloat` | 打开浮窗 `(key, record, onCloseCallback?: true \| (() => void))` |
+| `hideFloat` | 关闭浮窗 |
+| `onSelectionChange` | 选中变更 `(keys, rows)` |

package/skills/listpage/examples.md

@@ -0,0 +1,243 @@
+# ListPage 示例
+
+## 1. 最小示例（单文件内联，listpage-components）
+
+```tsx
+import { ListPage } from "listpage-components";
+import { Button, Input, Select, Space } from "antd";
+
+const filterItems = [
+  { name: "name", label: "姓名", component: <Input placeholder="请输入" /> },
+  {
+    name: "status",
+    label: "状态",
+    component: (
+      <Select
+        allowClear
+        options={[
+          { value: "enabled", label: "启用" },
+          { value: "disabled", label: "停用" },
+        ]}
+      />
+    ),
+  },
+];
+
+const columns = [
+  { title: "姓名", dataIndex: "name", key: "name", renderer: "text" },
+  { title: "地址", dataIndex: "address", key: "address", ellipsis: true },
+];
+
+const request = async (
+  { current, pageSize }: { current: number; pageSize: number },
+  filterValues: any,
+  _sortParams: { field?: string; order?: "ascend" | "descend" | null }
+) => {
+  const all = Array.from({ length: 100 }).map((_, i) => ({
+    id: i + 1,
+    name: `Edward ${i + 1}`,
+    address: `Address ${i + 1}`,
+  }));
+  let list = all.filter(
+    (r) => !filterValues?.name || r.name.includes(filterValues.name)
+  );
+  const skip = (current - 1) * pageSize;
+  return { list: list.slice(skip, skip + pageSize), total: list.length };
+};
+
+export default function Page() {
+  return (
+    <ListPage
+      title="用户列表"
+      extra={(ctx) => (
+        <Space>
+          <Button onClick={() => ctx.refreshTable()}>刷新</Button>
+        </Space>
+      )}
+      filter={{ items: filterItems }}
+      table={{ columns, rowKey: "id" }}
+      request={request}
+      initialValues={{ currentPage: 1, pageSize: 10 }}
+    />
+  );
+}
+```
+
+## 2. 复杂用法（内置渲染器、toolbar、多浮窗）
+
+内置列渲染器：`text`、`ellipsis`、`tag`、`badge`、`date`、`datetime`、`number`、`money`、`percent`、`boolean`、`link`、`enum`、`copyable`、`avatar`、`image`。浮窗 `onClose(1)` 表示确认并刷新，`onClose()` 表示取消。
+
+```tsx
+import { ListPage } from "listpage-components";
+import { Button, Input, Select, Space, Drawer, Modal, message } from "antd";
+
+const request = async (pageParams, filterValues) => {
+  const { current, pageSize } = pageParams;
+  // 模拟数据与筛选...
+  const list = [{ id: "1", name: "张三", dept: "研发", status: "启用", price: "100.00", createTime: "2025-01-01" }];
+  return { list, total: list.length };
+};
+
+const DetailModal = ({ record, visible, onClose }) => (
+  <Modal open={visible} title="详情" onCancel={onClose} footer={null}>
+    <p>姓名：{record?.name}</p>
+  </Modal>
+);
+
+const EditModal = ({ record, visible, onClose }) => (
+  <Modal open={visible} title="编辑" onCancel={onClose} onOk={() => { message.success("保存成功"); onClose(1); }}>
+    <Input defaultValue={record?.name} />
+  </Modal>
+);
+
+const CreateDrawer = ({ record, visible, onClose }) => (
+  <Drawer open={visible} title="新建" onClose={() => onClose()}>
+    <Input placeholder="姓名" />
+    <Button type="primary" onClick={() => { message.success("新建成功"); onClose(1); }}>保存</Button>
+  </Drawer>
+);
+
+export default () => (
+  <ListPage
+    title="用户列表"
+    initialValues={{ filterValues: {}, pageSize: 10, currentPage: 1 }}
+    extra={(ctx) => <Button type="primary" onClick={() => ctx.showFloat("create", {}, true)}>新建</Button>}
+    filter={{
+      items: [
+        { name: "name", label: "姓名", component: <Input allowClear placeholder="姓名" /> },
+        { name: "dept", label: "部门", component: <Select allowClear options={[{ label: "研发", value: "研发" }]} /> },
+        { name: "status", label: "状态", component: <Select allowClear options={[{ label: "启用", value: "启用" }]} /> },
+      ],
+    }}
+    toolbar={{ render: ({ ctx }) => <Button onClick={() => ctx.refreshTable()}>刷新</Button> }}
+    table={{
+      title: "数据列表",
+      rowSelection: true,
+      rowTitleKey: "name",
+      extra: (ctx) => <Button size="small" onClick={() => ctx.refreshTable()}>刷新</Button>,
+      rowKey: "id",
+      columns: [
+        { title: "ID", dataIndex: "id", key: "id", width: 100, renderer: "copyable" },
+        { title: "姓名", dataIndex: "name", key: "name", width: 100, renderer: "link", rendererOptions: { onClick: (record, ctx) => ctx?.showFloat("detail", record) } },
+        { title: "部门", dataIndex: "dept", key: "dept", width: 90, renderer: "tag", rendererOptions: { colorMap: { 研发: "blue" } } },
+        { title: "状态", dataIndex: "status", key: "status", width: 90, renderer: "tag", rendererOptions: { colorMap: { 启用: "success" } } },
+        { title: "价格", dataIndex: "price", key: "price", width: 110, renderer: "money", rendererOptions: { precision: 2, prefix: "¥" } },
+        { title: "创建时间", dataIndex: "createTime", key: "createTime", width: 110, renderer: "date", rendererOptions: { format: "YYYY-MM-DD" } },
+        {
+          title: "操作",
+          key: "action",
+          width: 140,
+          fixed: "right",
+          component: ({ ctx, record }) => (
+            <Space size="small">
+              <Button type="link" size="small" onClick={() => ctx.showFloat("detail", record)}>详情</Button>
+              <Button type="link" size="small" onClick={() => ctx.showFloat("edit", record, true)}>编辑</Button>
+            </Space>
+          ),
+        },
+      ],
+    }}
+    request={request}
+    floats={[
+      { key: "detail", render: DetailModal },
+      { key: "edit", render: EditModal },
+      { key: "create", render: CreateDrawer },
+    ]}
+  />
+);
+```
+
+## 3. 带初始状态（initialValues）
+
+`initialValues` 用于预填筛选条件、分页等，组件首次挂载时生效。
+
+```tsx
+<ListPage
+  title="用户列表"
+  initialValues={{
+    filterValues: { name: "张三", status: "启用" },
+    pageSize: 20,
+    currentPage: 1,
+  }}
+  filter={{ items: filterItems }}
+  table={{ columns, rowKey: "id" }}
+  request={request}
+/>
+```
+
+## 4. 带行选择
+
+```tsx
+table={{
+  columns,
+  rowKey: "id",
+  rowSelection: true,
+  rowTitleKey: "name",
+}}
+```
+
+## 5. 内置渲染器速查（listpage-components）
+
+| renderer | 说明 | rendererOptions 示例 |
+| --- | --- | --- |
+| text | 文本 | - |
+| ellipsis | 省略 | `{ maxLength: 10 }` |
+| tag | 标签 | `{ colorMap: { 启用: "success" } }` |
+| badge | 徽标 | `{ colorMap: { 0: "default" } }` |
+| date | 日期 | `{ format: "YYYY-MM-DD" }` |
+| datetime | 日期时间 | `{ format: "YYYY-MM-DD HH:mm:ss" }` |
+| number | 数字 | `{ precision: 2 }` |
+| money | 金额 | `{ precision: 2, prefix: "¥" }` |
+| percent | 百分比 | `{ precision: 1 }` |
+| boolean | 布尔 | `{ labels: ["否", "是"] }` |
+| link | 链接 | `{ onClick: (record, ctx) => ctx?.showFloat("detail", record) }` |
+| enum | 枚举 | `{ options: [{ value: 0, label: "男" }] }` |
+| copyable | 可复制 | - |
+| avatar | 头像 | `{ fallback: "?" }` |
+| image | 图片 | `{ width: 40, height: 40 }` |
+
+## 6. 复杂结构（config 拆分目录）
+
+目录结构：
+
+```
+pages/MemberList/
+├── index.tsx
+├── config/
+│   ├── index.tsx
+│   ├── columns.tsx
+│   ├── filters.tsx
+│   ├── floats.tsx
+│   └── request.ts
+└── components/
+    └── SalesFormFloat.tsx
+```
+
+**config/index.tsx** 汇总导出：
+
+```tsx
+export { columns } from "./columns";
+export { filters } from "./filters";
+export { floats } from "./floats";
+export { request } from "./request";
+```
+
+**index.tsx** 组装（listpage-components）：
+
+```tsx
+import { ListPage } from "listpage-components";
+import { columns, filters, floats, request } from "./config";
+
+export default function MemberListPage() {
+  return (
+    <ListPage
+      title="会员列表"
+      filter={{ items: filters }}
+      table={{ columns, rowKey: "id" }}
+      request={request}
+      floats={floats}
+      initialValues={{ pageSize: 10, currentPage: 1 }}
+    />
+  );
+}
+```

package/templates/backend-template/.env.example

@@ -0,0 +1,7 @@
+DATABASE_URL=""
+DB_HOST=""
+DB_PORT=3306
+DB_USER="root"
+DB_PASSWORD=""
+DB_NAME=""
+DB_CONNECTION_LIMIT=20

package/templates/backend-template/package.json.tmpl

@@ -16,14 +16,16 @@
     "@nestjs/common": "^11.0.1",
     "@nestjs/core": "^11.0.1",
     "@nestjs/platform-express": "^11.0.1",
-    "@prisma/client": "^6.0.0",
-    "prisma": "^6.0.0",
+     "prisma": "^7.0.0",
+    "@prisma/adapter-mariadb": "^7.0.0",
+    "@prisma/client": "^7.0.0",
+    "@prisma/internals": "^7.0.0",
     "@nestjs/config": "^4.0.0",
     "reflect-metadata": "^0.2.2",
     "class-transformer": "^0.5.1",
     "class-validator": "~0.14.2",
     "rxjs": "^7.8.1",
-    "listpage-next-nest": "~0.0.286"
+    "listpage-next-nest": "~0.0.292"
   },
   "devDependencies": {
     "@nestjs/schematics": "^11.0.0",

package/templates/backend-template/prisma/schema.prisma

@@ -3,8 +3,7 @@ generator client {
 }
 
 datasource db {
-    provider = "sqlite"
-    url      = "file:./dev.db"
+    provider = "mysql"
 }
 
 model User {

package/templates/backend-template/prisma.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'prisma/config';
+import 'dotenv/config';
+
+export default defineConfig({
+  schema: 'prisma/schema.prisma',
+  datasource: {
+    url: process.env.DATABASE_URL!,
+  },
+});

package/templates/backend-template/src/modules/app.module.ts

@@ -1,7 +1,13 @@
 import { Module } from '@nestjs/common';
 import { PrismaModule } from './prisma/prisma.module';
+import { ConfigModule } from '@nestjs/config';
 
 @Module({
-  imports: [PrismaModule],
+  imports: [
+    ConfigModule.forRoot({
+      isGlobal: true,
+    }),
+    PrismaModule,
+  ],
 })
 export class AppModule {}

package/templates/backend-template/src/modules/prisma/prisma.service.ts

@@ -1,8 +1,25 @@
-import { Injectable, OnModuleInit } from '@nestjs/common';
+import { Injectable, OnModuleInit, OnModuleDestroy } from '@nestjs/common';
+import { ConfigService } from '@nestjs/config';
 import { PrismaClient } from '@prisma/client';
+import { PrismaMariaDb } from '@prisma/adapter-mariadb';
 
 @Injectable()
-export class PrismaService extends PrismaClient implements OnModuleInit {
+export class PrismaService
+  extends PrismaClient
+  implements OnModuleInit, OnModuleDestroy
+{
+  constructor(configService: ConfigService) {
+    const adapter = new PrismaMariaDb({
+      host: configService.get<string>('DB_HOST'),
+      port: Number(configService.get<number>('DB_PORT')),
+      user: configService.get<string>('DB_USER'),
+      password: configService.get<string>('DB_PASSWORD'),
+      database: configService.get<string>('DB_NAME'),
+      connectionLimit: Number(configService.get<number>('DB_CONNECTION_LIMIT')),
+    });
+    super({ adapter });
+  }
+
   async onModuleInit() {
     await this.$connect();
   }

package/templates/frontend-template/package.json.tmpl

@@ -12,7 +12,7 @@
   "dependencies": {
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "listpage-next": "~0.0.286",
+    "listpage-next": "~0.0.292",
     "react-router-dom": ">=6.0.0",
     "@ant-design/v5-patch-for-react-19": "~1.0.3",
     "ahooks": "^3.9.5",
@@ -23,6 +23,8 @@
     "styled-components": "^6.1.19",
     "mobx": "~6.15.0",
     "@ant-design/icons": "~6.0.2",
+    "listpage-components": "~0.0.292",
+    "lucide-react": "~0.575.0"
     "mobx-react-lite": "~4.1.1"
   },
   "devDependencies": {

package/templates/frontend-template/src/App.tsx.tmpl

@@ -1,17 +1,68 @@
-import { App } from 'listpage-next/features/ReactApp';
+import React from 'react';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { ConfigProvider } from 'antd';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
 import { menus } from './router/menus';
-
+import { MainLayout } from './layouts/MainLayout';
 import './App.css';
 
+import 'listpage-components/ui.css';
+
+dayjs.locale('zh-cn');
+
+const RequireAuth = ({ children }: { children: React.ReactElement }) => {
+  const token = localStorage.getItem('token');
+  if (!token) {
+    return <Navigate to="/login" replace />;
+  }
+  return children;
+};
+
 export default () => {
   return (
-    <App
-      basename="/__APP_NAME__"
-      icon={<span>Logo</span>}
-      title="Next Page"
-      menus={menus}
-      hasAuth={() => true}
-      loginElement={<div>登录页</div>}
-    />
+    <ConfigProvider
+      theme={{
+        token: {
+          colorPrimary: '#00A67E', // Medical Green
+          borderRadius: 4,
+          controlHeight: 28,
+        },
+        components: {
+          Switch: {
+            trackHeightSM: 16,
+            handleSizeSM: 12,
+            trackPadding: 2,
+            trackMinWidthSM: 28,
+          },
+        },
+      }}
+    >
+      <BrowserRouter basename="/__APP_NAME__">
+        <Routes>
+          <Route
+            path="/"
+            element={
+              <RequireAuth>
+                <MainLayout />
+              </RequireAuth>
+            }
+          >
+            <Route
+              index
+              element={<Navigate to={`/${menus[0].key}`} replace />}
+            />
+            {menus.map((menu) => (
+              <Route
+                key={menu.key}
+                path={`${menu.key}/*`}
+                element={menu.element}
+              />
+            ))}
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </ConfigProvider>
   );
 };
+

package/templates/frontend-template/src/layouts/MainLayout.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useLocation, useNavigate, Outlet, matchPath } from 'react-router-dom';
+import { Activity } from 'lucide-react';
+import { RouterAdminLayout } from 'listpage-components';
+
+import { menus } from '../router/menus';
+
+export const MainLayout: React.FC = () => {
+  return (
+    <div className="h-screen overflow-hidden">
+      <RouterAdminLayout
+        title="你的应用标题"
+        logo={<Activity />}
+        collapsedWidth={70}
+        menus={menus}
+        routerAdapter={{
+          useLocation,
+          useNavigate,
+          matchPath: (pattern, pathname) => {
+            const result = matchPath({ path: pattern, end: false }, pathname);
+            if (!result) return null;
+            return {
+              params: result.params as any,
+              pathname: result.pathname,
+              pattern,
+            };
+          },
+        }}
+      >
+        <Outlet />
+      </RouterAdminLayout>
+    </div>
+  );
+};

package/templates/frontend-template/src/router/menus.tsx

@@ -1,14 +1,9 @@
-import type { MenuItem } from 'listpage-next';
-
-export const menus: MenuItem[] = [
+export const menus: any[] = [
   {
     key: 'menu1',
+    path: 'menu1',
     label: '菜单一',
-    element: <div>菜单一的内容</div>
+    icon: <span>📈</span>,
+    element: <div>菜单1</div>,
   },
-  {
-    key: 'menu2',
-    label: '菜单二',
-    element: <div>菜单二的内容</div>
-  },
-];
+];

package/templates/package-app-template/package.json

@@ -9,7 +9,7 @@
     "publish": "ts-node src/publish.ts"
   },
   "dependencies": {
-    "listpage-next-deploy": "0.0.286"
+    "listpage-next-deploy": "0.0.292"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",

package/templates/rush-template/docs/ListPage-AI/347/224/237/346/210/220/350/247/204/350/214/203.md

@@ -174,6 +174,8 @@ import {
   type ListPageTableColumn,
   type PaginationData,
   type ListPageContext,
+  type ListPageFloatProps,
+  type FloatComponentProps,
 } from "listpage-next";
 import { Button, Input, Select, Space } from "antd";
 
@@ -204,6 +206,45 @@ const filters: FilterFormOption[] = [
 const columns: ListPageTableColumn<User>[] = [
   { title: "姓名", dataIndex: "name", key: "name", component: "text" },
   { title: "地址", dataIndex: "address", key: "address", ellipsis: true },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 160,
+    fixed: 'right',
+    component: ({ ctx, record }) => (
+      <Space>
+        <Button type="link" size="small" onClick={() => ctx.showFloat('edit', record, true)}>
+          编辑
+        </Button>
+        <Popconfirm
+          title="确定要删除吗？"
+          onConfirm={async () => {
+            await api.sales.remove(record.id);
+            message.success('删除成功');
+            ctx.refreshTable();
+          }}
+        >
+          <Button type="link" size="small" danger>
+            删除
+          </Button>
+        </Popconfirm>
+      </Space>
+    ),
+  },
+];
+
+const EditorModal = (props: FloatComponentProps<User>) => {
+  return <Modal></Modal>
+}
+
+const EditorDrawer = (props: FloatComponentProps<User>) => {
+  return <Drawer></Drawer>
+}
+
+
+const floats: ListPageFloatProps[] = [
+  { key: 'edit', render: EditorModal },
+  { key: 'create', render: EditorDrawer },
 ];
 
 const request = async (